@import 'src/styles/variables.scss';

.menu {
  @include inner_shadow;

  display: flex;
  background-color: $content_bg;
  border-radius: $radius;

  @include tablet {
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    flex: 1;
  }

  & > * {
    padding: $gap;
  }
}

.item {
  flex: 0 0 auto;
  padding: $gap * 0.5 $gap $gap * 0.5 $gap;
  fill: currentColor;
  color: $gray_50;
  transition: color 0.25s;
  cursor: pointer;
  border-radius: $radius;
  min-height: 36px;
  display: flex;
  flex-direction: row;
  align-items: center;

  &:hover {
    color: white;
  }

  @include tablet {
    flex-direction: column;
    flex: 1;
  }

  &.active {
    @include outer_shadow;
    color: white;

    &.green {
      background: $primary_gradient;
    }

    &.orange {
      background: $danger_gradient;
    }

    &.yellow {
      background: $warning_gradient;
    }
  }

  &.stretchy {
    flex: 1;
    justify-content: center;
  }
}

.text {
  font: $font_14_semibold;
  text-transform: uppercase;
  padding-left: $gap * 0.75;
  padding-right: $gap * 0.35;

  @include tablet {
    padding-top: $gap * 0.5;
    font: $font_12_semibold;
  }
}
