@use "../../styles/variables" as vars;
@use "../../styles/colors" as colors;
@use "../../styles/screen" as screen;

.error-page {
  display: block;
  padding-top: 1rem;

  &__section {
    width: 100%;
    margin: auto;
    display: flex;
    padding: 2rem;

    // Match Angular: v-spacing(2rem) + h-spacing(2rem)
    & > *:not(:last-child) {
      margin-right: 2rem;
      margin-bottom: 2rem;
    }

    @include screen.desktop {
      padding-top: 3rem;
      max-width: 960px;
      width: 75%;
    }

    @include screen.mobile {
      flex-direction: column;

      & > *:not(:last-child) {
        margin-right: 0;
        margin-bottom: 2rem;
      }
    }
  }

  &__illustration {
    // Match Angular: flex: 30% (equivalent to flex: 0 1 30%)
    flex: 30%;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: -2rem;

    @include screen.mobile {
      display: none;
    }
  }

  &__code {
    font-size: 8rem;
    color: colors.$light-gray;
  }

  &__title {
    font-size: 3rem;
    color: colors.$text-color;
  }

  &__content {
    // Match Angular: flex: 70% + v-spacing(1rem)
    flex: 70%;

    & > *:not(:last-child) {
      margin-bottom: 1rem;
    }

    @include screen.mobile {
      flex: 100%;
    }
  }

  &__description {
    color: colors.$light-gray;
    line-height: 1.5;
  }

  // Search input — matches Angular error-page-search
  &__search {
    width: 100%;

    @include screen.desktop {
      width: 17rem;
    }

    margin-bottom: 1rem;

    &-control {
      position: relative;
    }

    &-icon {
      position: absolute;
      top: 0;
      right: 0;
      background: no-repeat;
      background-image: url("/assets/img/icon--search.svg");
      width: 2.25rem;
      height: 2.25rem;
      background-position: center;
      cursor: pointer;

      &:hover {
        background-image: url("/assets/img/icon--search-blue.svg");
      }
    }

    input {
      font-size: 0.875rem;
      box-sizing: border-box;
      width: 100%;
      height: 2.25rem;
      padding: 0.25rem 0.5rem;
      border: 1px solid colors.$border-input;
      background: colors.$white;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      transition: all 0.2s;
      outline: 0 solid transparent;
      border-radius: 0.1875rem;
      position: relative;
      top: 0;
      left: 0;

      &:focus {
        border: 1px solid colors.$border-blue;
        box-shadow: 0 0.0625rem 0.1875rem colors.$border-blue;
      }
    }
  }

  &__actions {
    display: flex;
    padding: 2rem 0;
    flex-wrap: wrap;

    // Match Angular: h-spacing(1rem) on gt-mobile
    @include screen.desktop {
      & > *:not(:last-child) {
        margin-right: 1rem;
      }
    }

    @include screen.mobile {
      flex-wrap: wrap;

      & > *:not(:last-child) {
        margin-bottom: 1rem;
      }
    }
  }

  &__btn {
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    text-decoration: none;
    border-radius: vars.$border-radius;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;

    &--primary {
      background-color: colors.$blue-light;
      color: colors.$white;
      border: none;

      &:hover {
        background-color: colors.$blue-light--hover;
      }
    }

    &--secondary {
      background: transparent;
      color: colors.$blue-light;
      border: 1.3px solid colors.$blue-light;

      &:hover {
        border-color: colors.$blue;
        color: colors.$blue;
      }
    }

    &--link {
      background: transparent;
      color: colors.$blue-light;
      border: none;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}
