@import "../_variables";

.settingsContainer {
  padding: 0rem 2rem;
  padding-bottom: 5rem;

  .kycAlert {
    background-color: var(--lime-green-100);
    border: 1px solid var(--lime-green);
    color: #fff;
    font-weight: bold;
    font-size: nth($fontSize, 2);
    margin-bottom: 2.5rem;
    padding: 1.5rem 1rem;
  }

  .settingSectionHeader {
    margin: 5rem 0 3rem 0;

    .heading {
      color: var(--primary-text);
      font-size: nth($fontSize, 3);
      font-weight: 600;
    }

    .divider {
      background-color: var(--border-color-100);
      margin: 1rem 0;
    }

    .settingSectionHeaderRow {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .heading {
        margin: 0;
      }

      .headerExtraButton {
        padding: 0 1rem;
        height: fit-content;
        color: var(--secondary-text);
        font-weight: 600;
        display: flex;
        align-items: center;
      }
    }
  }

  .accountContainer {
    .accountDetailsSection {
      gap: 2rem;

      .accountAvatarContainer {
        position: relative;
        .accountAvatar {
          border: 1px solid #fff;
        }

        .editIcon {
          position: absolute;
          bottom: 0;
          right: 0;
          background-color: var(--primary-text);
          color: var(--primary-bg);
          border-radius: 50%;
          cursor: pointer;
          padding: 0.2rem;
          width: 1.3rem;
          height: 1.3rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .accountDetails {
        .label {
          color: var(--secondary-text);
          font-size: nth($fontSize, 2);
          margin-bottom: 0.8rem;
          font-weight: 500;
        }

        .accountInput {
          background-color: var(--input-bg);
          color: var(--primary-text);
          height: 2.5rem;
          border: 0.5px solid var(--border-color-100);
          border-radius: 4px;
          width: 30rem;

          &::placeholder {
            color: var(--secondary-text-500);
          }
        }
      }
    }
  }

  .accountSecuritySection {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .description {
      color: var(--secondary-text);
      font-size: nth($fontSize, 2);
      font-weight: 500;
      line-height: 1.3;
    }

    .accountSecurityItem {
      .item {
        gap: 1rem;
        display: flex;
        align-items: center;

        .label {
          color: var(--primary-text);
          font-size: nth($fontSize, 3);
          font-weight: 600;
          margin-bottom: 0.4rem;
        }

        .onlyLabel {
          color: var(--secondary-text);
          font-size: nth($fontSize, 2);
          font-weight: 500;
          line-height: 1.3;
        }

        .value {
          color: var(--secondary-text);
        }
      }

      .icon {
        font-size: 1.5rem;
        color: var(--secondary-text);

        &:hover {
          color: var(--primary-text);
        }
      }

      .extras {
        display: flex;
        justify-content: flex-end;

        .extraBugbaseButton {
          height: 2.3rem;
          font-size: nth($fontSize, 1);
        }

        .kycButton {
          color: var(--bugbase-green);
          font-size: nth($fontSize, 2);
          font-weight: 600;
          display: flex;
          align-items: center;
        }

        .kycButtonReview {
          @extend .kycButton;
          color: var(--orange);
        }

        .kycButtonReject {
          @extend .kycButton;
          color: var(--danger);
        }
      }
    }
  }
}

.idVerificationInputBox {
  position: relative;

  .validateButton {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    color: var(--orange);
    font-weight: bold;

    &:hover {
      color: #fff;
      background: none;
    }
  }

  .validateButtonSuccess {
    @extend .validateButton;
    color: var(--bugbase-green);

    &:hover {
      color: var(--bugbase-green);
    }
  }
}

.storageContainer {
  padding: 0 2rem;

  .ebsActivation {
    gap: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .labelSection {
      display: flex;
      gap: 1rem;
      align-items: center;

      .icon {
        font-size: nth($fontSize, 5);
        color: var(--primary-text);
      }

      .label {
        h3 {
          font-size: nth($fontSize, 3);
          font-weight: 700;
          color: var(--primary-text);
        }

        p {
          font-size: nth($fontSize, 1);
          font-weight: 600;
          color: var(--secondary-text);
          margin: 0;
        }
      }
    }

    .createdAt {
      font-weight: 700;
      color: var(--bugbase-green);
      font-size: nth($fontSize, 3);
    }

    @include responsive(tablet3) {
      flex-direction: column;
      align-items: flex-start;
      gap: 2rem;
    }
  }

  .volumeDetails {
    margin: 2rem 0;
    .header {
      font-weight: 700;
      padding: 0.5rem 0;
      color: var(--primary-text);
      font-size: nth($fontSize, 4);
      border-bottom: 1px solid var(--border-color-100);
    }

    .infoLabel {
      margin: 2rem 0;
      h3 {
        font-size: nth($fontSize, 3);
        font-weight: 700;
        color: var(--primary-text);
      }

      p {
        font-size: nth($fontSize, 1);
        font-weight: 600;
        color: var(--secondary-text);
        margin: 0;
      }
    }

    .infoLabelDanger {
      display: flex;
      gap: 1rem;
      align-items: center;
      justify-content: space-between;

      .infoLabel {
        margin: 0;

        h3 {
          color: var(--danger);
        }
      }

      @include responsive(tablet3) {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
      }
    }
  }

  .disableVolumeWrapper {
    display: flex;
    text-align: center;
    align-items: center;
    flex-direction: column;
    padding: 0 2rem;

    p {
      font-size: nth($fontSize, 4);
      font-weight: 600;
      max-width: 37rem;
      line-height: 1.3;
      margin: 1rem 0 2rem 0;
      color: var(--secondary-text);
    }
  }
}

.shareModal {
  p {
    color: var(--secondary-text);
  }

  .spanLabel {
    color: var(--primary-text);
    margin-bottom: 0.5rem !important;
  }

  :global {
    .ant-input {
      background: none;
      color: var(--primary-text);
    }
  }

  .shareButtons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 2rem;
    gap: 1rem;
    margin-bottom: 1rem;
  }
}

.shareButton {
  width: 2rem;
  height: 2rem;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  color: var(--primary-text);

  &:hover {
    color: var(--secondary-text);
  }
}

.inviteInput {
  :global {
    .ant-input-wrapper {
      pointer-events: none;

      .ant-input {
        background-color: var(--input-bg);
        color: var(--primary-text);
        height: 2.5rem;
        border: 0.5px solid var(--border-color-100);
        border-radius: 4px 0 0 4px;
        min-width: 30rem;
      }

      .anticon {
        pointer-events: all;
        cursor: pointer;
      }
    }

    .ant-input-group-addon {
      height: 2.5rem;
      cursor: pointer;
      pointer-events: all;
      background-color: var(--input-bg);
      color: var(--primary-text);
      border: 0.5px solid var(--border-color-100);
      border-radius: 0 4px 4px 0;
    }
  }
}
