/**
 * 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/utilities/convert' as *;
@use '@carbon/styles/scss/components/combo-box/combo-box' as *;
@use '@carbon/styles/scss/components/list-box/list-box' as *;
@use '@carbon/styles/scss/components/select/select' as *;
@use '@carbon/styles/scss/components/text-input/text-input' as *;
@use '../../globals/utils/flex-grid' as *;

/// Footer language selector
/// @access private
/// @group footer

@mixin language-selector {
  .#{$prefix}--language-selector__container {
    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));

    @include combo-box;
    @include list-box;
    @include select;
    @include text-input;

    order: 0;

    margin: $spacing-09 0;
    padding-inline: 0;

    @include type-style('body-compact-01');
    @include breakpoint-down(md) {
      @include make-col-ready;
    }

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

    .#{$prefix}--language-selector {
      block-size: $spacing-09;
      inline-size: 100%;
      margin-inline-end: 0;
      max-inline-size: 100%;

      .#{$prefix}--list-box__menu-icon {
        inset-inline-end: $spacing-04;
      }

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

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

      @include breakpoint(md) {
        min-inline-size: to-rem(216px);

        .#{$prefix}--footer--short & {
          float: inline-end;
        }
      }

      // Expressive styles
      .#{$prefix}--text-input,
      .#{$prefix}--list-box__menu-item__option {
        @include type-style('body-compact-01');
      }
    }

    .#{$prefix}--footer--short & {
      margin-block-start: 0;
    }

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

      margin-block-end: $spacing-05;

      .#{$prefix}--footer--short & {
        @include make-col-offset(2, 8);
      }
    }

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

      order: 1;

      .#{$prefix}--footer--short & {
        @include make-col-offset(10, 16);
      }
    }

    @include breakpoint(max) {
      .#{$prefix}--footer--short & {
        @include make-col-offset(11, 16);
      }
    }

    .#{$prefix}--list-box--up {
      .#{$prefix}--list-box__menu {
        z-index: 1;
        inset-block-end: to-rem(47px);
      }
    }

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

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

    // Toggle views depending on breakpoint
    // <Select /> for mobile/tablet
    // <ComboBox /> for desktop
    .#{$prefix}--form-item {
      display: block;

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

    .#{$prefix}--list-box__wrapper {
      display: none;

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

    .#{$prefix}--label {
      display: block;
      padding: 0;
      margin: 0;
      block-size: 0;
      visibility: hidden;
    }
  }
}