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

.menu {
  background: $content_bg_backdrop;
  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: transparent;
  transition: background-color 0.25s;
  position: relative;

  &.has_dot::after {
    content: ' ';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 8px;
    height: 8px;
    background: $color_danger;
    border-radius: 8px;
    transform: translate(0, -50%);
  }

  &:hover {
    background-color: $content_bg_success;
  }

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

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