@mixin profile-theme() {
  app-profile {
    .mat-mdc-text-field-wrapper {
      background-color: $white-color !important;
      box-shadow: 0px 5px 6px #2f2c8324;
    }

    .profile {
      height: 100%;
      gap: 20px;
      .profile-menu {
        height: 80%;
        background-color: $off-white;
        margin: 2rem 0;
        box-shadow: -2px 6px 9px #2f2c8333;
        border-radius: 18px;
      }

      &__content {
        height: 80%;
        margin: 2rem 0;
        border-radius: 18px;
      }
      .profile-menu {
        ul {
          padding: 20px;
          list-style: none;
          gap: 20px;
          li {
            padding: 10px;
            border-radius: 20px;
            color: $main-color;
            cursor: pointer;
          }
        }
      }

      .profile-user {
        background-color: $off-white;
        margin-bottom: 20px;
        padding: 20px;
        border-radius: 18px;
        img {
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
        div {
          p {
            font-size: 18px;
            color: $black-color;
            margin-bottom: 5px;
          }

          span {
            font-size: 14px;
            color: $black-color;
          }
        }

        &__actions {
          button {
            color: $main-color;
            background-color: #2f2c8326;
            box-shadow: -2px 6px 9px #2f2c8333;
            border-radius: 18px;
            padding: 10px 30px;
            border: none;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
          }
        }
      }

      .basic-info {
        background-color: $off-white;
        padding: 20px;
        border-radius: 18px;
        height: 80%;
        position: relative;
        .card {
          background: $white-color;
          box-shadow: 0px 5px 6px #2f2c8324;
          border: 0.5px solid #2f2c83;
          padding: 20px 0;
          border-radius: 20px;
          padding-bottom: 0;
          h1 {
            text-align: center;
            font-size: 15px;
            color: $main-color;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
          }

          p {
            text-align: center;
            padding: 2rem 0;
            font-size: 13px;
          }
        }
      }
    }

    .form-input {
      width: 100%;
      label {
        margin-bottom: 5px;
        font-size: 13px;
        span {
          margin: 0 5px;
        }
      }
      input,
      select {
        padding: 15px 20px;
        border-radius: 10px;
        box-shadow: 0px 5px 6px #2f2c8324;
        border: 0.5px solid $main-color;
        border-radius: 10px;
        outline: none;
      }
    }
  }

  .edit {
    color: $main-color;
    background-color: #2f2c8326;
    box-shadow: -2px 6px 9px #2f2c8333;
    border-radius: 18px;
    padding: 10px 30px;
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    position: absolute;
    right: 1rem;
  }

  .save-changes {
    background-color: #28abe3 !important;
    color: #fff !important;
    box-shadow: -2px 6px 9px #2f2c8333 !important;
    width: 170px;
  }

  .cancel {
    box-shadow: -2px 6px 9px #2f2c8333 !important;
    background-color: #fff !important;
    color: #28abe3 !important;
    border: 1px solid #28abe3 !important;
    width: 170px;
  }

  .btn {
    padding: 15px 20px;
    border: none;
    border-radius: 28px;
    cursor: pointer;
  }
}