// ==============================================
// 💪 JOB INTERVIEW SCOPE SCSS
// ==============================================

.sec-update-profile{
  .profile-card{
    width: 100%;
    max-width: 752px;
    padding: 42px;
    background-color: $white;
    border-radius: 16px;
    box-shadow: $box-shadow-01;
    @media screen and (max-width: $screen-xs) {
      padding: 32px 24px;
    }
    &:not(:last-of-type){
      margin-bottom: 24px;
    }
    >h3{

    }
    .btn-style{
      @media screen and (max-width: $screen-xs) {
        min-width: 100%;
        padding: 18px 25px 18px;
      }
    }
    .form{
      &.w-350{
        .form-card{
          max-width: 350px;
        }
      }
    }
    .form-card{
      &:not(:last-of-type){
        margin-bottom: 48px;
        @media screen and (max-width: $screen-xs) {
          margin-bottom: 32px;
        }
      }
      &.change-password-card{
        padding: 32px 0 48px;
        margin-bottom: 32px;
        border-top: 1px solid $cool-gray-03;
        border-bottom: 1px solid $cool-gray-03;
        @media screen and (max-width: $screen-xs) {
          padding: 24px 0;
        }
      }
      >h3{

      }
      .column-grid-2{
        display: grid;
        grid-template-columns: repeat(2, calc(50% - 12px));
        column-gap: 24px;
        @media screen and (max-width: $screen-xs) {
          grid-template-columns: 1fr;
        }
        &:not(:last-of-type){
          .form-group{
            margin-bottom: 44px;
            @media screen and (max-width: $screen-xs) {
              margin-bottom: 23px;
            }
          }
        }
      }
      .form-group{
        >.mileage-grid{
          &.has-icon{
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            column-gap: 8px;
          }
        }
        ul.radio-list{
          li{
            &:not(:last-of-type){
              @media screen and (max-width: $screen-xs) {
                margin-bottom: 0;
              }
            }
          }
        }
      }
      .change-password-link{
        @media screen and (max-width: $screen-xs) {
          margin-top: 27px;
        }
        a{
          color: $primary-01;
        }
      }
      .user-profile{
        display: grid;
        grid-template-columns: 128px 1fr;
        align-items: center;
        column-gap: 24px;
        .user-img{
          width: 128px;
          height: 128px;
          img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            object-position: top;
          }
        }
        .user-content{
          ul.card-actions{
            &.active{
              opacity: 1;
            }
            li{
              display: inline-block;
              vertical-align: middle;
              &:not(:last-of-type){
                margin: 0 8px 0 0;
              }
              a{
                padding: 8px;
                display: inline-flex;
                align-items: center;
                gap: 10px;
                //min-width: 36px;
                height: 36px;
                color: $cool-gray-12;
                &:hover{
                  color: $cool-gray-12;
                }
                img{
                  max-width: 20px;
                }
              }
            }
          }
        }
      }
    }
    .upload-file-wrapper{
      ul.upload-list{
        li{
          display: block;
          &:not(:last-of-type){
            margin-bottom: 12px;
          }
          .upload-card{
            padding: 6px 16px;
            display: grid;
            grid-template-columns: 1fr 160px;
            align-items: center;
            column-gap: 16px;
            background: $white;
            border-radius: 8px;
            box-shadow: $box-shadow-01;
            @media screen and (max-width: $screen-xs) {
              //display: flex;
              //align-items: center;
              //gap: 16px;
              grid-template-columns: 1fr 82px;
              column-gap: 0;
            }
            .name-wrapper{
              p{
                display: flex;
                align-items: center;
                gap: 16px;
                @media screen and (max-width: $screen-xs) {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  max-width: 90%;
                  display: block;
                }
                img{
                  max-width: 20px;
                  @media screen and (max-width: $screen-xs) {
                    margin-right: 13px;
                  }
                }
              }
            }
            ul.card-actions{
              opacity: 0;
              transition: all .3s ease-in-out;
              @media screen and (max-width: $screen-xs) {
                display: none;
              }
              &.active{
                opacity: 1;
                @media screen and (max-width: $screen-xs) {
                  display: block;
                }
              }
              li{
                display: inline-block;
                vertical-align: middle;
                &:not(:last-of-type){
                  margin: 0 8px 0 0;
                  @media screen and (max-width: $screen-xs) {
                    margin: 0;
                  }
                }
                a{
                  padding: 8px;
                  display: inline-flex;
                  align-items: center;
                  gap: 10px;
                  //min-width: 36px;
                  height: 36px;
                  span{
                    color: $cool-gray-12;
                    @media screen and (max-width: $screen-xs) {
                      display: none;
                    }
                  }
                  img{
                    max-width: 20px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}