@use '../base' as *;
@use 'menu.scss' as *;

/* -------------------------------- 

File#: _2_user-menu
Title: User Menu
Descr: A menu controlled by the user profile image
Usage: codyhouse.co/license

-------------------------------- */

.user-menu-control {
  --profile-figure-size: 40px;

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-align: left;

  &:hover {
    .user-menu-control__img-wrapper {
      opacity: 0.8;
    }

    .user-menu__meta-title {
      color: var(--color-primary);
    }
  }

  &:focus, &.menu-control--active {
    outline: none;

    .user-menu-control__img-wrapper::after {
      opacity: 1;
      transform: scale(1);
    }
  }
}

.user-menu-control__img-wrapper {
  width: var(--profile-figure-size);
  height: var(--profile-figure-size);
  position: relative;
  //transition: opacity 0.2s;

  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: -4px;
    top: -4px;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    width: calc(var(--profile-figure-size) + 8px);
    height: calc(var(--profile-figure-size) + 8px);
    border: 2px solid var(--color-primary);
    pointer-events: none;

    opacity: 0;
    transform: scale(0.8);

    //transition: all 0.2s;
  }
}

.user-menu-control__img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.user-menu__meta {
  //max-width: 100px;
}

.user-menu__meta-title {
  //transition: color 0.2s;
}