@import "../mixins/text";

#block-openintranet-theme-account-menu {
  @include subtitle-300;

  .user-avatar {
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 50%;

    img {
      width: 48px;
      height: 48px;
      object-fit: cover;
      border-radius: 50%;
      border: 2px solid $blue-500;
    }
  }

  .user-name {
    color: $body-color;
  }

  .dropdown-toggle {
    &::after {
      color: $body-secondary-color;
    }
  }

  .dropdown-menu {
    .nav-link {
      color: $body-secondary-color;
      text-decoration: none;
    }
  }
}

#block-account-menu-mobile {
  border-top: 1px solid $dark-navy-50;
  margin-top: .5rem;
  padding-top: 1.375rem;

  @include subtitle-300;

  .mobile-account-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .user-profile-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    color: $body-color;
  }

  .user-avatar {
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    flex-shrink: 0;

    .field--name-user-picture {
      height: 100%;
    }

    .field__item {
      height: 100%;
    }

    img.image-style-thumbnail {
      width: 32px;
      height: 32px;
      object-fit: cover;
      border-radius: 50%;
      border: 2px solid $blue-500;
    }
  }

  .logout-link {
    color: $blue-500;
    font-weight: 500;
    text-decoration: none;

    &:before {
      content: url('../images/icons/power.svg');
      margin-right: .5rem;
      position: relative;
      top: 3px;
    }
  }
}
