@import '../../../../styles/abstracts/variables';

.profile-display-name {
  width: 100%;
  padding: 4px;
  justify-content: center;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  margin-top: 20px;

  &__content-wrapper {
    position: relative;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .error-message {
    color: red;
    font-size: 12px;
    margin-top: 8px;
  }
  .ant-form-item {
    margin-bottom: 0;
  }

  .ant-input.invalid {
    border-color: red;
  }

  .overlay {
    width: 100%;
    height: 100%;
    opacity: 0.6;
    position: absolute;
    background: white;
    z-index: 3;
    top: 0;
    left: 0;
  }

  .border-box {
    border-radius: 8px;
    border: 1px solid #e6e6e6;
  }
  .border-box.active {
    border-color: #58e5df;
  }

  .wrap-img {
    width: 56px;
    height: 56px;
    background: linear-gradient(#e6e6e6, #e6e6e6);
    border-radius: 8px;
    margin-top: 8px;
    padding: 1px !important;
    cursor: pointer;

    &.active {
      background: linear-gradient(
        270deg,
        #17e391 21.47%,
        #58e5df 77.04%,
        #60e5e8 77.05%
      );
      padding: 2px !important;
    }

    &_item {
      justify-content: center;
      align-items: center;
      display: flex;
      width: 100%;
      height: 100%;
      border-radius: 6px;
      background: white;
    }
  }

  .ant-radio-group {
    .ant-radio-button-wrapper {
      margin-left: 0 !important;
      width: 47px;
      height: 32px;
      padding: 0;
      border: none !important;
      background: $grey !important;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-weight: $medium;
      font-size: $medium1;
      &.ant-radio-button-wrapper-checked {
        color: $white;
      }
      .ant-radio-button {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &:first-child {
        border-top-left-radius: 8px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 0;
        background: $grey !important;
        .ant-radio-button-checked {
          border-top-left-radius: 8px;
          border-bottom-left-radius: 8px;
          background-color: $red;
        }
      }
      &:last-child {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 8px !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 8px !important;
        .ant-radio-button-checked {
          border-top-right-radius: 8px !important;
          border-bottom-right-radius: 8px !important;
          background-color: $success;
        }
      }
    }
  }
  input,
  textarea {
    height: 48px;
    padding-left: 16px;
    padding-right: 16px;
    font-weight: $semi-bold;
    font-size: $medium1;

    &::placeholder {
      color: rgba($text, 0.5);
      font-weight: $regular;
    }
  }
  &__content {
    padding: 20px;
    border-radius: 8px;
    border: 1px solid $grey2;
    &--item {
      &.active {
        background:
          linear-gradient($white, $white) padding-box,
          linear-gradient(to left, #17e391, #58e5df, #60e5e8) border-box;
        border: 2px solid transparent;
        display: inline-block;
      }

      padding: 20px;
      border: 2px solid $border2;
      border-radius: 8px;
      cursor: pointer;
    }
    .ant-input[disabled] {
      color: rgba($dark, $alpha: 0.5);
      background-color: $white;
      cursor: not-allowed;
      opacity: 1;
    }
  }
  &__divider {
    width: 1px;
    height: 100%;
    background: $grey2;
  }
}