@import "../palette";
@import "../variables";
@import "../mixins/fontSize";

.user-menu {
  text-align: left;
  ul {
    padding: 0px;
    list-style: none;
    margin: 0 0 1em 0;
  }
  &__link {
  }
  &__logout {
    margin-bottom: 1em;
    @include border($gray-blue-color);
    border-style: solid none;
    line-height: 3;
  }
  a {
    color: $brand-color;
    line-height: 2;
    text-decoration: none;
    transition: all $global-transition-duration;
    &:hover {
      color: $selected-text;
      opacity: 0.8em;
    }
  }
  &__container {
    position: absolute;
    bottom: 10px;
    left: 10px;
  }
  &__scrim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  &__menu {
    $padding: 15px;
    $border-size: 1px;
    position: relative;
    background: $light-blue-color;
    @include border;
    box-shadow: 0px 4px 40px 0px rgba(0,0,0,0.60);
    padding: $padding;
    z-index: $sidebar-z-index;
    width: $side-bar-width;
    a {
      display: block;
      line-height: 3;
    }
    .user-menu__user {
      bottom: 10px - ($padding + $border-size);
      left: 10px -($padding + $border-size);
      cursor: default;
    }
  }
  > .user-menu__user {
    padding: 20px;
    transition: all $global-transition-duration;
    &:hover {
      background: $light-blue-color;
    }
  }
  &__user {
    $size: 35px;
    position: relative;
    display: flex;
    align-content: stretch;
    outline: none;
    &[tabIndex] {
      cursor: pointer;
    }
    &__image {
      border-radius: 50%;
      width: $size;
      height: $size;
      object-fit: cover;
    }
    &__name {
      line-height: $size;
      color: $brand-color;
      @include font-size(13px);
      white-space: nowrap;
      overflow: hidden;
      padding-left: 1em;
      letter-spacing: 0.5px;
    }
  }
}