/**
 * Copyright IBM Corp. 2016, 2023
 *
 * 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 'sass:list';

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/components/accordion' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/themes' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;

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

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

    @include accordion;
    @include make-col-ready;

    order: 1;

    padding: 0;

    @include breakpoint(md) {
      padding: 0 calc($grid-gutter / 2);
    }

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

    .#{$prefix}--accordion__heading {
      display: flex;
      align-items: center;
      padding: 0;
      min-block-size: $spacing-09;
    }

    ::slotted([slot='locale-button']),
    ::slotted([slot='language-selector']) {
      display: inline-block;
      inline-size: 100%;
      margin-inline-start: 0;
      max-inline-size: 100%;
    }
  }

  :host(#{$c4d-prefix}-footer-nav[disable-locale-button]),
  nav.#{$prefix}--footer-nav__locale-button--disabled {
    border-block-start: none;
    @include breakpoint(lg) {
      padding-block-start: 0;
      @include make-col-offset(2, 16);
    }
  }

  .#{$prefix}--footer-nav__container {
    @include breakpoint(md) {
      @include make-row;

      display: block;
      column-count: 2;
      column-gap: $grid-gutter;
      margin-inline: 0;
    }

    @include breakpoint(lg) {
      column-count: 3;
      column-gap: $grid-gutter;
    }
  }

  :host(#{$c4d-prefix}-footer[size='short'])
    ::slotted(#{$c4d-prefix}-footer-nav),
  .#{$prefix}--footer--short .#{$prefix}--footer-nav {
    display: none;
  }
}