@import "settings.breakpoints";
@import "settings.colors";
@import "settings.vars";
@import "settings.z-index";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";
@import "mixins/components.label";

// Static Menu

.o-menu {
  @include font-gm-sans-bold;
  font-weight: normal;
  font-style: normal;
  padding: 0 rem(20) 0 0;
  border-top: 1px solid $color-stone-999;
}

.o-menu__label {
  @include c-label-section-feed;
  padding: rem(10);
  border: none;
  display: block;
}

.o-menu__item {
  list-style: none;
  color: $color-white;
  border-bottom: 1px solid $color-stone-300;
}

.o-menu__link {
  padding: rem(15) 0;
  line-height: line-height(15, 18);
  display: block;
  font-size: rem(14);
  color: $color-grey-900;
  text-decoration: none;
  letter-spacing: rem(1);
  text-transform: uppercase;
  &:hover,
  &:focus {
    text-decoration: underline;
  }
  &:active {
    color: $color-grey-500;
  }
}

.o-menu__icon {
  width: rem(10);
  height: rem(10);
  margin-left: rem(1.5);
  fill: $color-grey-300;
  display: inline-block;
}

// flat menu

.o-menu__wrapper {
  background-color: $color-stone-200;
}

.o-menu__wrapper--blue {
  background-color: $color-blue-50;
}

.o-menu--flat-menu {
  display: flex;
  flex-flow: row wrap; /* Shorthand for flex-direction: row and flex-wrap: wrap */
  margin-left: 0;
  margin-right: 0;
  margin-top: rem(5);
  padding: 0 rem(10);
  border-top: none;
}

.o-menu__item--flat-menu {
  list-style: none;
  color: #000;
  flex-basis: 50%;
  margin: 0;
  padding: 0 rem(10) rem(10) 0;
  border-bottom: none;
}

.o-menu__link--flat-menu {
  font-size: rem(14);
  font-family: "GMsanC-Regular", $font-sans-stack;
  font-weight: normal;
  font-style: normal;
  letter-spacing: rem(0.5);
  color: $color-grey-800;
  text-decoration: none;
  text-transform: none;
  margin: 0;
  padding: 0;
  display: flex;
  &:hover {
    text-decoration: underline;
  }
  &::before {
    content: "";
    width: rem(5);
    min-width: rem(5);
    height: rem(5);
    margin: rem(5) rem(12) 0 0;
    border-radius: 50%;
    background-color: $color-grey-800;
    display: block;
  }
}

@include mq($from: mobileWide) {
  .o-menu__item--flat-menu {
    flex-basis: 33%;
  }
}

@include mq($from: desktop) {
  .o-menu__item--flat-menu {
    flex-basis: 25%;
  }
}
