@use 'menus';
@use 'effects';

/******************
 *    User
 ******************** */

.user {
  @extend %menu-item-clickable;
  display: grid;
  grid-template-columns: 25% auto;
  min-height: 70px;
}

.user > *,
.menu-button > * {
  align-self: center;
}

.user {
  .user-img {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    user-select: none;
    grid-row: 1 / 4;
    grid-column: 1 / 2;
    margin: auto;
  }

  .name {
    font-size: 15px;
    font-weight: 400;
    grid-row: 1;
    grid-column: 2 / 3;
  }

  .bio {
    color: var(--minor-textcolor);
    font-size: 13px;
    grid-row: 2;
    grid-column: 2 / 3;
  }

  .email {
    color: var(--minor-textcolor);
    font-size: 13px;
    grid-column: 2 / 3;
    word-break: break-all;
    grid-row: 3;
  }
}

.menu-gap {
  height: 20px;
}

.menu-button-transparent,
.menu-button,
.menu-button-disabled {
  min-height: 50px;
  cursor: pointer;
  outline: none;
  user-select: none;
  display: grid;
  grid-template-columns: 15% auto 15%;

  &.menu-button {
    @extend %menu-item-clickable;
  }

  &.menu-button-transparent {
    @include effects.hover-effect(var(--default-foreground-20), var(--default-foreground-40));
  }

  &.menu-button-disabled {
    @extend %menu-item;
  }

  > * {
    margin: auto;
  }

  .img,
  .img-right {
    width: 36px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s ease-in-out;
    i {
      font-size: 2em;
      transition: all 0.3s ease-out;
    }

    &.hide i {
      opacity: 0;
    }
    &.rev i {
      transform: rotate(180deg);
    }
  }

  .img {
    grid-column: 1 / 2;
  }

  .img-right {
    grid-column: 3 / 4;
  }

  .text {
    color: var(--default-textcolor);
    font-size: 15px;
    font-weight: 400;
    grid-column: 2 / 3;
    margin-left: 0;
  }

  &.toggle-setting {
    grid-template-columns: 15% auto 15%;
  }
}

.text-warning {
  color: #d9534f !important;
}

.groupGridRow {
  grid-row: 1 / 3 !important;
}

.device-menu-button {
  grid-template-columns: 1fr 2fr 1fr 2fr 2fr !important;
}

.device-img,
.device-text {
  grid-column: unset !important;
}

a {
  text-decoration: none;
}

.menu-header {
  color: var(--primary-color-depth3);
  font-size: 15px;
  margin: 10px 5px 10px 15px;
  font-weight: 500;
}

.menu-hint {
  color: var(--minor-textcolor);
  font-size: 13px;
  margin: 10px 10px 10px 15px;
}

.d-none {
  display: none !important;
}
