/**
 * Copyright IBM Corp. 2016, 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/layout' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;

@use '@carbon/styles/scss/components/accordion';
@use '@carbon/styles/scss/components/combo-box';
@use '@carbon/styles/scss/components/select';
@use '@carbon/styles/scss/components/form';
@use '@carbon/styles/scss/components/text-input';
@use '@carbon/styles/scss/components/link';
@use '../locale-modal';

/// Footer styles
/// @access private
/// @group footer

@mixin footer {
  :host(#{$c4d-prefix}-footer) {
    background-color: $background;

    color: $text-primary;
    inline-size: 100%;
    padding-block: $spacing-09;
    padding-block-start: $spacing-09;

    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));

    .#{$prefix}--modal-content {
      .#{$prefix}--link {
        &,
        &:visited {
          color: $icon-inverse;
        }
      }
    }

    @include breakpoint-down(md) {
      ::slotted([slot='brand']) {
        margin-block-end: $spacing-09;
      }
    }
  }

  :host(#{$c4d-prefix}-footer[size='short']) {
    .#{$prefix}--footer__logo-container {
      inline-size: 100%;
    }

    .#{$prefix}--language-selector__container {
      margin-block-start: $spacing-09;
      @include breakpoint(md) {
        margin-block-start: 0;
      }
      @include breakpoint(max) {
        @include make-col-offset(10, 16);
      }
    }

    @include breakpoint-down(md) {
      ::slotted([slot='brand']) {
        margin-block-end: 0;
      }
    }
  }

  :host(#{$c4d-prefix}-footer[size='micro']) {
    @include breakpoint(md) {
      padding-block: 0;
    }

    @include breakpoint-down(md) {
      ::slotted([slot='locale-button']) {
        margin-block-start: 0;
      }
    }

    .#{$prefix}--footer__logo-container {
      @include breakpoint(md) {
        display: none;
      }
    }

    .#{$prefix}--language-selector__container {
      padding: 0;
    }

    .#{$prefix}--locale-btn__container {
      flex-basis: auto;

      button {
        border: none;
      }
    }

    .#{$prefix}--legal-nav {
      border-block-start: 0;
    }
  }

  :host(#{$c4d-prefix}-footer-nav-item),
  :host(#{$c4d-prefix}-legal-nav-item),
  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));

    display: list-item;
    outline: none;

    .#{$prefix}--footer__link.#{$prefix}--link {
      @include type-style('body-01');

      &,
      &:visited {
        color: $text-secondary;
      }

      &:focus {
        outline-color: $focus;
        outline-offset: -1px;
      }

      &:active {
        color: $text-on-color;
      }

      &:hover,
      &:visited:hover {
        color: $text-primary;
      }
    }
  }

  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
    .#{$prefix}--footer__link.#{$prefix}--link {
      cursor: pointer;
    }
  }

  :host(#{$c4d-prefix}-legal-nav) {
    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));

    .#{$prefix}--legal-nav__list {
      .#{$prefix}--legal-nav__list-item {
        .#{$prefix}--link {
          color: $text-secondary;

          &:hover {
            color: $text-primary;
          }
        }
      }
    }
  }

  .#{$prefix}--footer__main {
    box-sizing: border-box;
    @include make-container;
  }

  .#{$prefix}--footer__main-container {
    @include make-row;

    flex-direction: column;

    :host(#{$c4d-prefix}-footer[size='short']) &,
    .#{$prefix}--footer--short & {
      flex-direction: row;
    }

    @include breakpoint(lg) {
      flex-direction: row;
    }
  }

  .#{$prefix}--footer__logo-container {
    @include make-container;

    margin-inline: 0;

    @include breakpoint(md) {
      margin-block-end: 0;
      padding-inline: $spacing-05;
    }

    @include breakpoint(lg) {
      inline-size: 100%;
      margin-inline: auto;
    }

    .#{$prefix}--footer__logo-row {
      @include make-row;

      justify-content: space-between;
    }
  }

  @media print {
    :host(#{$c4d-prefix}-footer),
    .#{$prefix}--footer {
      /* stylelint-disable declaration-no-important */
      // need important since it gets overriden in WC Footer without it
      display: none !important;
      /* stylelint-enable declaration-no-important */
    }
  }

  :host(#{$c4d-prefix}-footer),
  :host(#{$c4d-prefix}-legal-nav) {
    display: block;
    .#{$c4d-prefix}--adjunct-links__container {
      list-style: none;
      margin-block-start: $spacing-07;
      @include breakpoint-down(md) {
        @include make-container;
      }
    }
    .#{$c4d-prefix}--adjunct-links__container--hidden {
      display: none;
    }
  }

  :host(#{$c4d-prefix}-footer-nav-group[open]) {
    @extend .#{$prefix}--accordion__item--active;
  }

  :host(#{$c4d-prefix}-footer-nav-group[open]) .#{$prefix}--accordion__content {
    display: block;
    padding-block-start: 0;
  }

  :host(#{$c4d-prefix}-footer-nav-group) {
    .#{$prefix}--accordion__heading {
      align-items: center;
      padding: 0;
      border-block-start: 1px solid $border-subtle-01;
      min-block-size: $spacing-09;
    }
  }

  :host(#{$c4d-prefix}-footer-nav-group:last-of-type) {
    @include breakpoint-down(md) {
      border-block-end: 1px solid $border-subtle-01;
    }
  }

  // The style of legal nav deviates from the one of React, so we can make the markup simpler.
  // FIXME: Once the style is stabilized, change the markup of React, too, so we can share the style
  :host(#{$c4d-prefix}-legal-nav):not([size='micro']) {
    .#{$c4d-prefix}--adjunct-links__container,
    .#{$c4d-prefix}--legal-nav__list {
      padding-block: 0;

      @include breakpoint(md) {
        padding-block-start: $spacing-03;
      }
      @include breakpoint(lg) {
        @include make-col-offset(4, 16);
      }

      > ul {
        inline-size: 100%;
        @include breakpoint(md) {
          display: block;
          column-count: 2;
          column-gap: $grid-gutter;
        }

        @include breakpoint(lg) {
          column-count: 3;
        }
      }
    }
  }

  :host(#{$c4d-prefix}-legal-nav[size='micro']) {
    ::slotted(#{$c4d-prefix}-legal-nav-item),
    ::slotted(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
      @include breakpoint(md) {
        display: flex;
        align-items: center;
        padding: 0;
        min-block-size: $spacing-09;
      }
    }

    .#{$c4d-prefix}--adjunct-links__container {
      display: none;
    }

    .#{$c4d-prefix}--legal-nav {
      display: block;
      border-block-start: 0;
    }

    // The style of legal nav deviates from the one of React, so we can make the markup simpler.
    // FIXME: Once the style is stabilized, change the markup of React, too, so we can share the style
    .#{$c4d-prefix}--legal-nav__list {
      inline-size: 100%;

      div {
        @include breakpoint(lg) {
          display: flex;
        }
      }

      div > ul {
        padding: 0 $spacing-05;
        border-block-start: 1px solid $border-subtle-01;

        @include breakpoint-down(md) {
          padding-block-start: $spacing-03;
        }

        @include breakpoint(md) {
          display: flex;
          column-count: inherit;
        }

        @include breakpoint(lg) {
          padding: 0 $spacing-05 0 $spacing-07;
          border-block-start: none;
        }
      }
    }
  }

  :host(#{$c4d-prefix}-locale-button[size='micro']) {
    @include breakpoint(md) {
      flex-shrink: 1;
      padding: 0;
      margin: 0;

      margin-inline-start: 50%;

      .#{$prefix}--btn--tertiary {
        border: none;
        margin: 0;
        background-color: $background;
        @include type-style('body-short-01');
        @include breakpoint(md) {
          align-self: flex-end;
          border-inline-start: 1px solid $border-subtle-01;
        }

        @include breakpoint(lg) {
          margin: 0 (-$spacing-05) 0 0;
        }

        &:hover,
        &:focus {
          background-color: $background-hover;
          color: $text-primary;
        }

        .#{$prefix}--btn--tertiary,
        .#{$prefix}--list-box,
        .#{$prefix}--select-input {
          background-color: $background;
          max-inline-size: 100%;

          &:hover {
            background-color: $background-hover;
          }

          &:active {
            background-color: $background-active;
          }
        }

        .#{$prefix}--select {
          max-inline-size: 100%;
        }

        .#{$prefix}--text-input,
        .#{$prefix}--list-box,
        .#{$prefix}--select-input {
          border-block-end: none;
        }
      }
    }
    @include breakpoint(lg) {
      margin-inline-start: 0;
    }

    .#{$prefix}--btn {
      padding-block: $spacing-04;
    }

    .#{$prefix}--locale-btn {
      max-inline-size: 100%;
    }
  }

  :host(#{$c4d-prefix}-language-selector-desktop),
  :host(#{$c4d-prefix}-language-selector-mobile) {
    position: relative;
    padding: 0 $spacing-05;
    margin-block: $spacing-09;
    max-block-size: $spacing-09;
    outline: none;
    @include make-col(4, 4);

    .#{$prefix}--list-box__field {
      background-color: $layer-01;
    }

    .#{$prefix}--combo-box {
      inset-block-end: $spacing-05;
    }

    .#{$prefix}--list-box__menu {
      position: absolute;
      inset-block: auto 47px;
      max-block-size: 13.5rem;
    }

    .#{$prefix}--text-input {
      @include type-style('body-short-01');
      @include emit-layout-tokens();
    }

    @include breakpoint(md) {
      padding: 0;
      margin-block-start: 0;
      @include make-col(4, 8);
      @include make-col-offset(2, 8);
    }

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

      order: 1;

      min-inline-size: 13.5rem;
    }
  }

  :host(#{$c4d-prefix}-language-selector-desktop) {
    .#{$prefix}--list-box__menu-icon {
      inset-inline-end: $spacing-04;
    }

    .#{$prefix}--list-box__selection {
      inset-inline-end: 2.25rem;
    }

    .#{$prefix}--label-visually-hidden {
      block-size: 0;
      visibility: hidden;
    }
  }

  :host(#{$c4d-prefix}-language-selector-desktop[size='micro']) {
    align-self: flex-end;
    padding: 0;
    margin: 0;
    border-inline-start: 1px solid $border-subtle-01;
    inline-size: 100%;
    margin-block-end: 0;

    .#{$prefix}--dropdown {
      background-color: $background;
      block-size: $spacing-09;
      max-block-size: $spacing-09;

      .#{$prefix}--list-box__field {
        background-color: $background;
        block-size: inherit;
      }

      &:hover {
        background-color: $background-hover;
      }
    }

    .#{$prefix}--list-box__menu {
      inset-block-end: $spacing-09;
    }

    .#{$prefix}--dropdown,
    .#{$prefix}--text-input {
      border-block-end: none;
    }

    @include breakpoint(sm) {
      .#{$prefix}--select-input__wrapper {
        block-size: 100%;
      }

      .#{$prefix}--select-input {
        background-color: $background;
        block-size: 100%;
        border-block-end: none;

        &:hover {
          background-color: $background-hover;
        }
      }
    }

    @include breakpoint(md) {
      border-inline-start: 1px solid $border-subtle-01;
      max-inline-size: 50%;
    }
  }

  :host(#{$c4d-prefix}-language-selector-mobile[size='micro']) {
    align-self: flex-end;
    border-inline-start: 1px solid $border-subtle-01;
    inline-size: 100%;
    margin-block-start: 0;

    .#{$prefix}--select {
      display: block;
    }

    .#{$prefix}--select-input {
      block-size: 100%;
      inline-size: 100%;
      max-inline-size: 100%;

      &:hover {
        background-color: $background-hover;
      }
    }

    @include breakpoint(md) {
      padding: 0;
      margin: 0;
      max-inline-size: 50%;

      .#{$prefix}--select-input {
        background-color: $background;
        border-block-end: none;
      }
    }
  }

  :host(#{$c4d-prefix}-language-selector-mobile) {
    .#{$prefix}--select-input__wrapper {
      block-size: $spacing-09;
      margin-block-start: -#{$spacing-05};
    }
  }
}