////
/// @group components
////

@use 'sass:math';
@use '@nice-digital/nds-core/scss/colours';
@use '@nice-digital/nds-core/scss/focus';
@use '@nice-digital/nds-core/scss/layout';
@use '@nice-digital/nds-core/scss/media-queries';
@use '@nice-digital/nds-core/scss/spacing';
@use '@nice-digital/nds-core/scss/typography';
@use '@nice-digital/nds-core/scss/utils';
@use '@nice-digital/nds-core/scss/visibility';

/// Action banner component. Used to highlight
/// and give context to a call-to-action.
///
/// Modifiers:
/// - subtle
///
/// @since 0.3.1
.action-banner {
  @include visibility.hide-print;
  @include typography.links-inverse;
  background: colours.$action-banner-default-background;
  border: 1px solid colours.$action-banner-default-border;
  color: colours.$text-inverse;
  margin: utils.rem(0 0 spacing.$large);
  padding: utils.rem(spacing.$medium 0);
  position: relative;

  &__container {
    @include layout.container;
  }
  &__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  &__text {
    margin-right: utils.rem(spacing.$medium);
    flex: 1 1 70%;
  }

  &__title {
    @include typography.font-size(3);
    margin: utils.rem(0 0 spacing.$x-small);
  }

  &__intro {
    margin: utils.rem(0 0 spacing.$medium 0);
  }

  &__actions {
    @include focus.inverse-button-focus;
    flex: 0 0 auto;
    max-width: 100%;
    .btn {
      margin: 0;
      white-space: normal;
      word-break: break-word;
    }
  }

  &--subtle {
    @include typography.links-default;
    background: colours.$action-banner-subtle-background;
    color: colours.$text;

    .action-banner__actions {
      @include focus.default-button-focus;
    }
  }

  &--full-width,
  &--full-width-subtle {
    @include layout.fullWidth();
    @include typography.links-default;
    background: colours.$action-banner-full-width-background;
    border: 0;
    color: colours.$text-inverse;
    padding: 0;

    .action-banner__intro * {
      @include typography.lead();
      margin-top: utils.rem(spacing.$medium);
    }
    .action-banner__inner {
      display: unset;
    }

    .action-banner__container {
      @include layout.fullWidthContainer();
      min-height: 300px;
      padding-top: utils.rem(spacing.$x-large);
      padding-bottom: utils.rem(spacing.$x-large);
    }

    .action-banner__title {
      @include typography.h2();
      margin: 0;
    }

    .action-banner__actions {
      text-align: left;
      position: relative;
      top: 0;
      left: 0;
      transform: unset;
    }

    .action-banner__actions > .btn.btn--inverse {
      @include focus.default-button-focus;
    }

    .action-banner__text {
      position: relative;
      z-index: 1;
    }

    &__image-container {
      aspect-ratio: 16 / 9;
      background-position: center;
      background-size: cover;
      display: block;
      height: 100%;
    }

    & a {
      &:link,
      &:visited,
      &:hover,
      &:active,
      &:focus {
        color: colours.$action-banner-full-width-dark-background-text-colour;
        outline-color: colours.$focus-inverse;
      }
    }
  }

  &--full-width-subtle {
    @extend .action-banner--full-width;

    background: colours.$action-banner-full-width-subtle-background;
    color: colours.$text;

    .action-banner__actions {
      @include focus.default-button-focus;
    }

    & a {
      &:link,
      &:visited,
      &:hover,
      &:active,
      &:focus {
        color: colours.$action-banner-full-width-light-background-text-colour;
        outline-color: colours.$focus;
      }
    }
  }

  @include media-queries.mq($from: sm) {
    &--full-width,
    &--full-width-subtle {
      &__image-container {
        aspect-ratio: 21 / 9;
      }
    }
  }

  @include media-queries.mq($from: md) {
    @include layout.clearfix;

    &--full-width,
    &--full-width-subtle {
      &__image-container {
        aspect-ratio: unset;
        bottom: 0;
        overflow: hidden;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 0;

        @include media-queries.mq($from: md) {
          display: flex;
          width: 34%;
        }

        &::before {
          content: '';
          flex: 0 0 200px;
          pointer-events: none;
          position: relative;
          transform: rotate(-15deg) scale(1.2) translateX(-60%);
          z-index: 1;
        }
      }

      @include media-queries.mq($from: md) {
        .action-banner__text {
          width: 66%;
        }
      }
    }

    &--full-width {
      &__image-container {
        &::before {
          background: colours.$action-banner-full-width-background;
        }
      }
    }

    &--full-width-subtle {
      &__image-container {
        &::before {
          background: colours.$action-banner-full-width-subtle-background;
        }
      }
    }
  }
  @include media-queries.mq($until: sm) {
    .action-banner__actions .btn {
      white-space: normal;
      word-break: break-word;
    }
    .action-banner__text {
      white-space: normal;
      word-break: break-word;
      inline-size: 100%;
      margin-bottom: 0;
    }
    .action-banner__inner {
      flex-direction: column;
      align-items: flex-start;
    }
    .action-banner__intro {
      margin-bottom: utils.rem(spacing.$medium);
    }
  }
}