//-----------------------------
// Footer
//-----------------------------

@import '../../globals/scss/vars';
@import '../../globals/scss/colors';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/typography';
@import '../../globals/scss/css--reset';
@import '../../globals/scss/css--typography';
@import '../button/button';
@import '../link/link';

.#{$prefix}--footer--bottom-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
}

.#{$prefix}--footer {
  @include reset;
  @include font-family;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-top: 2px solid $brand-01;
  background-color: $ui-01;
  min-height: 3.5rem;
  z-index: z('footer');
  padding: rem(20px) 5%;
  width: 100%;
}

.#{$prefix}--footer-info {
  display: flex;

  @media screen and (max-width: 600px) {
    flex-direction: column;
  }
}

.#{$prefix}--footer-info__item {
  @include typescale('delta');
  @include line-height('body');
  display: flex;
  flex-direction: column;
  margin: 0;
  margin-right: rem(64px);
}

.#{$prefix}--footer-info__item > .#{$prefix}--link {
  font-weight: 600;
}

.#{$prefix}--footer-info__item > .#{$prefix}--footer-label {
  @include typescale('zeta');
  @include line-height('body');
  margin: 0;

  @media screen and (max-width: 600px) {
    display: none;
  }
}

.#{$prefix}--footer-cta {
  margin-left: auto;
}