@import "assets/styles/global_styles/variables";
@import "assets/styles/global_styles/mixins";
.user-menu {
  background-color: $color-white;
  border: 1px solid $color-border;
  @include border-radius(3px);
  @include box-shadow(5px 5px 14px 0px rgba(0, 0, 0, 0.1));
  text-align: left;

  .icon-left {
    display: inline-block;
    @include rem("font-size", 16);
    left: 22px;
    position: absolute;
    top: 20px;
  }

  .menu-link {
    color: $color-text;
    display: block;
    @include rem("font-size", 18);
    @include rem("line-height", 25);
    padding: 16px 20px 16px 55px;
    position: relative;
  }

  .item {
    &.active,
    &:hover {
      .menu-link {
        color: $color-violet-dark;
      }
    }

    &:not(:first-child) {
      border-top: 1px solid $color-border;
    }
  }
}

.user-menu-content {
  width: 100%;
}