/**
 * 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 '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../../globals/utils/flex-grid' as *;

/// Legal nav styles
/// @access private
/// @group footer

@mixin legal-nav {
  :host(#{$c4d-prefix}-legal-nav) {
    @include make-container;
  }

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

    .#{$prefix}--footer:not(.#{$prefix}--footer--short) & {
      @include breakpoint-down(md) {
        border-block-start: 0;
      }
    }
  }

  .#{$c4d-prefix}--adjunct-links__container,
  .#{$c4d-prefix}--legal-nav__list {
    inline-size: 100%;
    padding-inline-start: $spacing-05;

    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    @include breakpoint(md) {
      border-block-start: 1px solid $layer-accent-01;
    }

    @include breakpoint(lg) {
      @include make-col-offset(4, 16);
    }
    &.#{$c4d-prefix}--legal-nav__micro {
      @include theme(
        $g100,
        feature-flag-enabled('enable-css-custom-properties')
      );

      display: flex;
      flex-direction: column-reverse;
      margin-inline-end: 0;
      padding-block-end: 0;
      padding-inline-start: 0;

      @include breakpoint-down(md) {
        ::slotted([slot='locale']),
        ::slotted([slot='brand']) {
          display: none;
        }
      }

      @include breakpoint(md) {
        padding-inline-start: 0;
      }

      @include breakpoint(lg) {
        flex-direction: row;
        justify-content: space-between;
        margin-inline-start: 0;
      }

      .#{$prefix}--legal-nav__holder {
        padding: 0 $spacing-05;
        border-block-start: 1px solid $layer-accent-01;
        column-count: inherit;
        margin-inline-start: 0;

        @include breakpoint(md) {
          display: flex;
          align-items: center;
          padding: 0 $spacing-05 0;
        }

        @include breakpoint(lg) {
          border-block-start: none;
        }

        .#{$prefix}--legal-nav__list-item {
          display: flex;
          align-items: center;
          block-size: $spacing-09;
          margin-inline-end: 0;
          padding-block-start: 0;

          @include breakpoint(md) {
            margin-inline-end: $spacing-07;
          }

          a {
            display: flex;
            align-items: center;
            inline-size: 100%;
          }
        }
      }

      .#{$prefix}--locale-btn__container,
      .#{$prefix}--language-selector__container {
        margin: 0;

        @include breakpoint(md) {
          align-self: flex-end;
          border-inline-start: 1px solid $layer-accent-01;
          inline-size: 50%;
        }

        @include breakpoint(lg) {
          margin: 0;
        }

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

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

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

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

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

  .#{$prefix}--legal-nav__holder {
    margin-inline-start: 0;
    padding-block-start: 0;

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

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

  .#{$prefix}--adjunct-links__holder {
    padding: 0 $spacing-09 0 $spacing-05;
    inline-size: 100%;
    margin-block-start: $spacing-09;
    margin-inline-start: 0;

    @include breakpoint(md) {
      inline-size: 50%;
    }

    @include breakpoint(lg) {
      inline-size: 25%;
      margin-inline-start: 25%;
    }

    .#{$prefix}--legal-nav__list-item {
      margin-inline-end: 0;
      padding-block-start: 0;
    }

    .#{$prefix}--legal-nav__list-item:not(:first-of-type) {
      padding-block-start: $spacing-03;
    }
  }

  :host(#{$c4d-prefix}-legal-nav-item),
  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder),
  .#{$prefix}--legal-nav__list-item {
    padding: $spacing-03 0 0 0;
    margin-inline-end: $spacing-07;
    @include type-style('body-01');

    @include breakpoint-down(md) {
      &:first-child {
        padding-block-start: 0;
      }
    }

    &:last-child {
      margin-inline-end: 0;
    }
  }
}