// Name:            Footer
// Description:     Footer of website
//
// Component:       `c-footer`
//
// Dependencies:    `settings/colors.tokens`
//                  `v7_colors`
//
// ========================================================================
@use '../../../assets/sass/objects/v7/links' as *;
@use '../../../assets/sass/objects/v7/icons' as *;

@use '../../../assets/sass/tools/v7/utils'as *;
@use '../../../assets/sass/tools/v7/colors'as *;
@use '../../../assets/sass/tools/v7/mq'as *;
@use '../../../assets/sass/tools/v7/spacing'as *;
@use '../../../assets/sass/tools/v7/typography'as *;
@use '../../../assets/sass/tools/v7/zindex'as *;

@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/atomictypography.map' as *;
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/colors.map' as *;
@use '../../../assets/sass/settings/v7/sizes.map' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/settings/v7/typography.tokens' as *;
@use '../../../assets/sass/settings/v7/visibility.map' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/properties' as *;
@use '../../../assets/sass/settings/v7/scrollbar' as *;

.c-footer {

  // Custom properties
  // ======================================================================

  --footer-brand-height: 2rem;
  
  // ======================================================================

  border-top: 2px solid var(--divider-color);

  &--vanilla{
    border-top: unset;
    color: var(--background-color-light);
    a{
      color: inherit;
    }

    .c-brand-cn{
      fill: var(--background-color-muted-alpha);
      height: var(--footer-brand-height);
      @if $responsive-breakpoints {
        @include bp(sm) {
          --footer-brand-height: 2.5rem;
        }
      }
    }
  }

  .c-brand {
    fill: $ui-01;
    height: var(--footer-brand-height);
    @if $responsive-breakpoints {
      @include bp(sm) {
        --footer-brand-height: 2.5rem;
      }
    }
  }

  &__claim {
    background-color: $ui-07;
  }

  &__head {
    justify-content: center;
    @if $responsive-breakpoints {
      @include bp(sm) {
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  
  &__badge {
    height: $icon-size-large;
    width: auto;
    fill: $ui-01;
    @if $responsive-breakpoints {
      @include bp(md) {
        margin-top: 0;
      }
    }
  }

  .c-dropdown--network {
    color: $link-01;
  }
}