@use "system/breakpoints";
@use "system/colors";
@use "system/grid";
@use "system/spacing";
@use "system/states";
@use "system/typography";
@use "components/links/link/mixins";

.ods-banner {
  @extend %ods-padding-vertical-8, %ods-padding-vertical-13-breakpoint-medium;
  @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-medium, %ods-text--size-hotel-breakpoint-large;

  background-color: colors.$white;
  padding-left: grid.$gutter-size;
  padding-right: grid.$gutter-size;
  @include breakpoints.medium {
    padding-left: grid.$gutter-size-large;
    padding-right: grid.$gutter-size-large;
  }

  &__content {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(#{grid.$columns}, 1fr);
    gap: grid.$gutter-size;
    @include breakpoints.medium {
      gap: grid.$gutter-size-large;
    }

    margin: 0 auto;
    max-width: grid.$max-grid-size-for-centered-content;
  }

  &__text {
    display: grid;
    grid-template-columns: repeat(#{grid.$columns}, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: grid.$gutter-size;
    @include breakpoints.medium {
      column-gap: grid.$gutter-size-large;
    }

    grid-column: span 12 / span 12;
  }

  &__media {
    grid-column: 4 / 10;
    @extend %ods-margin-bottom-2;

    @include breakpoints.medium {
      grid-column: 1 / 5;
      margin-bottom: 0;
    }

    img {
      max-width: 300px;
    }
  }

  &__section {
    @extend %ods-text--weight-light;

    grid-column: span 12 / span 12;

    &--half {
      @include breakpoints.medium {
        grid-column: span 6 / span 6;
      }
    }

    &--third {
      @include breakpoints.medium {
        grid-column: span 4 / span 4;
      }
    }
  }

  &__link-icon {
    display: inline-block;

    @include mixins.icon-left("link-arrow");
    @include mixins.states;

    &:focus-visible {
      outline: none;
      color: states.$hover !important;
      background-color: colors.$purple-light;
      box-shadow: -0.375rem 0 0 colors.$purple-light;

      @include breakpoints.medium {
        box-shadow: -1.4rem 0 0 colors.$purple-light;
      }

      @include breakpoints.large {
        box-shadow: -1.35rem 0 0 colors.$purple-light;
      }
    }

    margin-left: 0.375rem;
    padding-left: 0.875rem;

    &::before,
    &:hover::before {
      font-size: 1rem;
      left: -0.375rem;
      top: 0;
    }

    @include breakpoints.medium {
      margin-left: 1.3rem;
      padding-left: 0.5rem;

      &::before,
      &:hover::before {
        font-size: 1.512rem;
        left: -1.4rem;
      }
    }

    @include breakpoints.large {
      padding-left: 1rem;

      &::before,
      &:hover::before {
        font-size: 1.763rem;
        left: -1.35rem;
      }
    }
  }

  &--media {
    .ods-banner__text {
      @include breakpoints.medium {
        grid-column: 5 / 13;
      }
    }
  }

  &--media-right {
    .ods-banner__media {
      @include breakpoints.medium {
        grid-column: 9 / 13;
      }
    }

    .ods-banner__text {
      @include breakpoints.medium {
        grid-column: 1 / 9;
      }
    }
  }

  &--yellow {
    background-color: colors.$yellow;
  }

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

  &--gray {
    background-color: colors.$gray;
  }

  &--beige {
    background-color: colors.$beige;
  }

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