@import 'pagesScss/partials/_colors.scss';

.profileContainer {
  display: flex;
  width: 100%;
  height: 100%;
  padding-left: 2rem;
  background-color: white;

  .profileSettings {
    display: flex;
    flex-direction: column;
    width: 70%;
    padding-top: 2rem;
    padding-right: 1.625rem;

    .profileSettingsMain {
      display: flex;
      gap: 2rem;
      margin-bottom: 1rem;

      .profilePhoto {
        h1 {
          font-weight: bold;
          margin-bottom: 1rem;
        }

        div:first-of-type {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0.5rem;

          span {
            color: $primary-violet;
            cursor: pointer;
          }
        }
      }

      .profileDetails {
        margin-top: 2rem;
        width: 100%;
      }
    }

    .profileDeleteAccount {
      padding: 1rem 0;
      border-top: 1px solid $primary-violet20;
      border-bottom: 1px solid $primary-violet20;
    }

    .profileSignOut {
      width: 70px;
      font-weight: bold;
      margin-top: 1rem;
      margin-left: 1rem;
      cursor: pointer;
    }
  }
}

@media screen and (max-width: 1000px) {
  .profileContainer {
    flex-direction: column;

    .profileSettings {
      width: 100%;
    }
  }
}

@media screen and (max-width: 450px) {
  .profileSettingsMain {
    flex-direction: column;
  }
}
