@import 'src/styles/variables';
@import 'src/styles/mixins';

.menu {
  border-radius: $radius;
  padding: 0 !important;
  display: flex;
  flex-direction: column;

  &.flat {
    box-shadow: none;
  }

  &.default {
    @include outer_shadow;
  }

  &.inset {
    @include inner_shadow;
  }
}

a.item {
  @include row_shadow;

  color: inherit;
  text-decoration: none;
  list-style: none;
  margin: 0 !important;
  padding: $gap;
  font: $font_16_semibold;
  cursor: pointer;
  background-color: transparentize($color_primary, 1);
  transition: background-color 0.25s;

  &:hover {
    background-color: transparentize($color_primary, 0.5);
  }

  &:first-child {
    border-radius: $radius $radius 0 0;
  }

  &:last-child {
    border-radius: 0 0 $radius $radius;
  }
}