//
// Copyright IBM Corp. 2019, 2024
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/themes' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../image/index';

@mixin global-banner {
  :host(#{$c4d-prefix}-global-banner) {
    @include theme($g100, true);

    display: block;
    background-color: $background;

    .#{$prefix}--global-banner-content-wrapper {
      @include make-row;
    }

    .#{$prefix}--global-banner-layout-container {
      @include make-container;

      box-sizing: border-box;

      max-block-size: $spacing-13;

      /* stylelint-disable selector-pseudo-class-no-unknown */
      &:where(a) {
        /* stylelint-enable selector-pseudo-class-no-unknown */
        display: block;
        border: $spacing-01 solid transparent;
        text-decoration: none;

        &:hover,
        &:active {
          background: $background-hover;
        }

        &:focus,
        &:active {
          border-color: $focus;
          outline: to-rem(1px) solid $background;
          outline-offset: to-rem(-1px);
        }
      }
    }

    .#{$prefix}--global-banner-text-container,
    .#{$prefix}--global-banner-cta-container,
    .#{$prefix}--global-banner-icon {
      box-sizing: border-box;
      padding-block: $spacing-05;

      @include breakpoint(lg) {
        padding-block: $spacing-07;
      }
    }

    .#{$prefix}--global-banner-image-container {
      position: relative;
      box-sizing: border-box;
      max-block-size: $spacing-13;
      padding-inline-end: $spacing-05;

      ::slotted(#{$c4d-prefix}-global-banner-image) {
        position: absolute;
        block-size: 100%;
        inline-size: calc(100% + #{$spacing-05});
        inset-block-start: 0;
        inset-inline-end: 0;

        @include breakpoint(max) {
          inline-size: 100%;
        }
      }
    }

    .#{$prefix}--global-banner-text-container {
      @include make-col(4, 4);

      max-inline-size: calc(100% - (20px + #{$spacing-05}));

      padding-inline: $spacing-05;

      @include breakpoint(md) {
        @include make-col(7, 8);
      }

      @include breakpoint(lg) {
        padding-inline-end: $spacing-09;
      }
    }

    .#{$prefix}--global-banner-cta-container {
      display: none;

      @include breakpoint(lg) {
        @include make-col(4, 16);
      }

      @include breakpoint(xlg) {
        @include make-col(3, 16);
      }

      @include breakpoint(max) {
        @include make-col(4, 16);
      }
    }

    .#{$prefix}--global-banner-icon {
      color: $text-primary;
      inline-size: calc(20px + #{$spacing-05});
      padding-inline-end: $spacing-05;
      text-align: end;

      svg {
        margin-block-start: $spacing-01;
      }

      @include breakpoint(md) {
        @include make-col(1, 8);

        padding-inline-end: 0;
      }

      @include breakpoint(lg) {
        display: none;
      }
    }

    &[has-image] {
      .#{$prefix}--global-banner-image-container {
        display: none;
      }
    }

    &[image-width='4-col'] {
      .#{$prefix}--global-banner-image-container {
        @include breakpoint(lg) {
          @include make-col(4, 16);
        }
      }

      .#{$prefix}--global-banner-text-container {
        @include breakpoint(lg) {
          @include make-col(7, 16);
        }
      }

      .#{$prefix}--global-banner-cta-container {
        @include breakpoint(lg) {
          @include make-col-offset(1, 16);
        }
      }
    }

    &[image-width='8-col'] {
      .#{$prefix}--global-banner-image-container {
        @include make-col(8, 16);
      }

      .#{$prefix}--global-banner-text-container {
        @include breakpoint(lg) {
          @include make-col(4, 16);
        }
      }
    }

    &:not([has-image]) {
      .#{$prefix}--global-banner-text-container {
        @include breakpoint(lg) {
          @include make-col(11, 16);
        }
      }

      .#{$prefix}--global-banner-cta-container {
        @include breakpoint(lg) {
          @include make-col-offset(1, 16);
        }
      }
    }

    ::slotted(#{$c4d-prefix}-button) {
      @include theme($g100, true);

      display: flex;

      inline-size: 100%;
      max-inline-size: 320px;

      @include breakpoint(xlg) {
        inline-size: calc(100% + #{$spacing-05});
      }
    }

    #{$c4d-prefix}-link-with-icon {
      @include breakpoint(md) {
        display: none;
      }
    }
  }

  :host(#{$c4d-prefix}-global-banner-heading) {
    @include type-style('heading-02', true);

    display: block;
    color: $text-primary;
    max-inline-size: 960px;

    @include breakpoint(lg) {
      inline-size: calc(100% - #{$spacing-10});
    }

    @include breakpoint(lg) {
      inline-size: calc(100% - #{$spacing-10});
    }

    @include breakpoint(xlg) {
      inline-size: calc(100% - #{$spacing-07});
    }
  }

  :host(#{$c4d-prefix}-global-banner-copy) {
    @include type-style('body-compact-02', true);

    display: block;
    color: $text-primary;
  }

  :host(#{$c4d-prefix}-global-banner-image) {
    .#{$prefix}--image__img {
      object-fit: cover;
    }
  }
}