@import "theme.scss";

.personal-container {
  width: 16rem;
  background: #1c1c1c;
  margin: 2px;
  border-radius: 0.5rem;

  .profile-container {
    display: flex;
    border-radius: 0.4rem;
    margin: 0.2rem;
    min-height: 6rem;
    border: 0.2rem solid rgba(89, 89, 89, 0.199);
    padding: 0.5rem;

    .profile-name {
      display: flex;
      flex-direction: column;
      margin-left: 0.5rem;
      h1 {
        font-size: 1.2rem;
        margin: 0;
      }
    }

    .profile-icon {
      display: inline-flex;
      padding: 0.2rem;
      cursor: pointer;
      font-size: 2rem;
      border-radius: 50%;
      transition: all 0.3s;
      height: 45;
      width: 45;
      margin-left: auto;
      .profile-image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .profile-icon:hover {
      transform: scale(1.05);
      background-color: rgba(255, 255, 255, 0.1);
    }

    .profile-icon:active {
      transform: scale(0.95);
    }
    .dropdown-container {
      position: absolute;
      top: 3.8rem;
      right: 0.8rem;
      background: #1c1c1c;
      border-radius: 0.5rem;
      width: 10rem;
      z-index: 1;
      background-color: #1c1c1c;
      border: 0.2rem solid rgba(89, 89, 89, 0.199);

      .dropdown-logged {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        justify-content: center;
        h1 {
          font-size: 1.2rem;
        }
        .profile-info {
          display: flex;
          width: 100%;
          justify-content: center;
          border-top: 0.2rem solid rgba(89, 89, 89, 0.199);
          border-bottom: 0.2rem solid rgba(89, 89, 89, 0.199);
          h1 {
            font-size: 1rem;
            margin-top: 0.5rem;
          }
        }
        .auth-button {
          margin-top: 0.5rem;
          padding: 0.5rem;
          border-radius: 0.5rem;
          background-color: #1c1c1c;
          border: 0.2rem solid rgba(89, 89, 89, 0.199);
          color: white;
          cursor: pointer;
          transition: all 0.3s;
          margin-bottom: 0.5rem;
        }
      }
    }
  }
}