@import "../_variables";

.settingsContainer {
  padding: 1.5rem;
  padding-bottom: 3rem;
  max-width: 640px;

  :global(.ant-form-item-label > label) {
    color: var(--secondary-text) !important;
    font-size: 0.75rem;
    font-weight: 500;
  }

  :global(.ant-form .ant-form-item .ant-form-item-control .ant-input),
  :global(
    .ant-form .ant-form-item .ant-form-item-control .ant-input-affix-wrapper
  ) {
    min-height: 2.3rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    background: var(--input-bg) !important;
    border: 1px solid var(--border-color-100);
    color: var(--primary-text);
    font-size: 0.8rem;
    transition: border-color var(--transition-fast);

    &:hover,
    &:focus,
    &:focus-within {
      border-color: var(--filled-purple-100);
      background: var(--input-bg) !important;
    }

    input {
      background: transparent !important;
      color: var(--primary-text);
    }
  }

  :global(
    .ant-form
      .ant-form-item
      .ant-form-item-control
      .ant-input-affix-wrapper
      .ant-input
  ) {
    border: none !important;
    padding: 0 !important;
    min-height: unset;
    box-shadow: none !important;
  }

  :global(.ant-form .ant-form-item .ant-form-item-control .ant-input-number) {
    min-height: 2.3rem;
    border-radius: 6px;
    background: var(--input-bg) !important;
    border: 1px solid var(--border-color-100);
    color: var(--primary-text);
    font-size: 0.8rem;
    transition: border-color var(--transition-fast);
    display: flex;
    align-items: center;

    &:hover,
    &:focus-within {
      border-color: var(--filled-purple-100);
      background: var(--input-bg) !important;
    }

    :global(.ant-input-number-input) {
      background: transparent !important;
      color: var(--primary-text);
      padding: 0 0.75rem;
    }

    :global(.ant-input-number-input::placeholder) {
      color: var(--secondary-text-500);
    }

    :global(.ant-input-number-handler-wrap) {
      background: var(--input-bg);
      border-left: 1px solid var(--border-color-100);

      :global(.ant-input-number-handler) {
        border-color: var(--border-color-100);
        color: var(--secondary-text);

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

  :global(
    .ant-form .ant-form-item .ant-form-item-control .ant-input::placeholder
  ),
  :global(
    .ant-form
      .ant-form-item
      .ant-form-item-control
      .ant-input-affix-wrapper
      input::placeholder
  ) {
    color: var(--secondary-text-500);
  }

  :global(.ant-form .ant-form-item .ant-form-item-control textarea.ant-input) {
    min-height: unset;
    padding: 0.5rem 0.75rem;
    background: var(--input-bg) !important;
    border: 1px solid var(--border-color-100);
    color: var(--primary-text);

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

    &:hover,
    &:focus {
      border-color: var(--filled-purple-100);
      background: var(--input-bg) !important;
    }
  }

  :global(.ant-switch) {
    background: rgba(255, 255, 255, 0.15);
  }

  :global(.ant-switch-checked) {
    background: var(--filled-purple) !important;
  }

  :global(
    .ant-form
      .ant-form-item
      .ant-form-item-control
      .ant-input-password
      .ant-input-suffix
  ) {
    color: var(--secondary-text);

    .anticon {
      color: var(--secondary-text);
      cursor: pointer;

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

  :global(
    .ant-form
      .ant-form-item
      .ant-form-item-control
      .ant-select
      .ant-select-selector
  ) {
    min-height: 2.3rem;
    padding: 0 0.75rem;
    border-radius: 6px;
    background: var(--input-bg) !important;
    border: 1px solid var(--border-color-100);
    color: var(--primary-text);
    font-size: 0.8rem;
    transition: border-color var(--transition-fast);
    display: flex;
    align-items: center;
  }

  :global(
    .ant-form
      .ant-form-item
      .ant-form-item-control
      .ant-select:hover
      .ant-select-selector
  ),
  :global(
    .ant-form
      .ant-form-item
      .ant-form-item-control
      .ant-select-focused
      .ant-select-selector
  ) {
    border-color: var(--filled-purple-100) !important;
  }

  :global(
    .ant-form
      .ant-form-item
      .ant-form-item-control
      .ant-select
      .ant-select-arrow
  ) {
    color: var(--secondary-text);
  }

  :global(
    .ant-form
      .ant-form-item
      .ant-form-item-control
      .ant-select
      .ant-select-selection-search
      input
  ) {
    color: var(--primary-text);
  }

  :global(
    .ant-form
      .ant-form-item
      .ant-form-item-control
      .ant-select
      .ant-select-selection-placeholder
  ) {
    color: var(--secondary-text-500);
  }

  :global(
    .ant-form
      .ant-form-item
      .ant-form-item-control
      .ant-select
      .ant-select-clear
  ) {
    background: var(--input-bg);
    color: var(--secondary-text);
  }

  :global(.ant-form-item-explain-error) {
    font-size: 0.7rem;
    margin-top: 4px;
  }

  :global(.ant-radio-wrapper) {
    color: var(--primary-text);
  }

  .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: 1.5rem 0 1rem 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: 100%;

          &::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);
        }
      }
    }
  }
}
.burpHttpsCard {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.8rem;
  border: 1px solid rgba(127, 86, 217, 0.28);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(127, 86, 217, 0.11), rgba(127, 86, 217, 0.035));
}

.burpHttpsIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 6px;
  color: #b884ff;
  background: rgba(127, 86, 217, 0.16);
  font-size: 1.05rem;

  &[data-ready="true"] {
    color: #7ee787;
    background: rgba(126, 231, 135, 0.1);
  }
}

.burpHttpsContent {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 0.15rem;
}

.burpHttpsTitle {
  color: var(--primary-text);
  font-size: 0.78rem;
  font-weight: 600;
}

.burpHttpsDescription {
  color: var(--secondary-text);
  font-size: 0.7rem;
  line-height: 1.4;
}

.burpHttpsFingerprint {
  max-width: 42rem;
  overflow: hidden;
  color: var(--secondary-text-500);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.burpHttpsButton {
  flex-shrink: 0;
  height: 1.8rem !important;
  padding: 0 0.75rem !important;
  border-radius: 5px !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
}

.fieldGroup {
  margin-bottom: 1.25rem;

  .fieldLabel {
    display: block;
    color: var(--secondary-text);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
  }

  .fieldValue {
    color: var(--primary-text);
    font-size: 0.85rem;
  }
}

.statusRow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.infoBox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface-hover);
  border: 1px solid var(--border-color-100);
  border-radius: 6px;
  margin-bottom: 1rem;
  color: var(--secondary-text);
  font-size: 0.75rem;
  line-height: 1.5;

  :global(.anticon) {
    margin-top: 2px;
    flex-shrink: 0;
  }
}

.warningBox,
.errorBox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  line-height: 1.5;

  :global(.anticon) {
    margin-top: 2px;
    flex-shrink: 0;
  }

  code {
    color: var(--primary-text);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color-100);
    border-radius: 4px;
    padding: 0.05rem 0.25rem;
    font-size: 0.7rem;
  }

  strong {
    color: var(--primary-text);
    font-weight: 600;
  }
}

.warningBox {
  background: rgba(255, 190, 80, 0.08);
  border: 1px solid rgba(255, 190, 80, 0.28);
  color: #e6b96c;
}

.errorBox {
  background: rgba(255, 91, 91, 0.08);
  border: 1px solid rgba(255, 91, 91, 0.28);
  color: #ff8b8b;
}

.mcpPanel {
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  background: var(--surface-hover);
  border: 1px solid var(--border-color-100);
  border-radius: 6px;

  label,
  :global(.ant-form-item-label > label) {
    color: var(--secondary-text) !important;
  }

  :global(.ant-btn) {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-color-100);
    color: var(--secondary-text);
    box-shadow: none;

    &:hover,
    &:focus {
      background: rgba(255, 255, 255, 0.08) !important;
      border-color: var(--border-default) !important;
      color: var(--primary-text) !important;
    }
  }

  :global(.ant-btn-primary) {
    background: var(--filled-purple) !important;
    border-color: var(--filled-purple) !important;
    color: var(--primary-text) !important;

    &:hover,
    &:focus {
      background: #7a2de6 !important;
      border-color: #7a2de6 !important;
    }
  }
}

.mcpPanelHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.mcpPanelTitle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--primary-text);
  font-size: 0.84rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.mcpPanelDescription {
  color: var(--secondary-text);
  font-size: 0.72rem;
  line-height: 1.6;
}

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

  :global(.ant-switch) {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.15);
  }

  :global(.ant-switch-checked) {
    background: var(--danger) !important;
  }
}

.mcpInlineControl {
  display: flex;
  gap: 0.5rem;
  align-items: center;

  .mcpReadOnlyInput {
    flex: 1;
    min-width: 0;
  }

  :global(.ant-btn) {
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 6px;
  }
}

.mcpReadOnlyInput {
  &:global(.ant-input),
  &:global(.ant-input-affix-wrapper) {
    min-height: 2.25rem;
    border-radius: 6px;
    background: var(--input-bg) !important;
    border: 1px solid var(--border-color-100);
    color: var(--primary-text);
    font-family: var(--font-mono), monospace;
    font-size: 0.76rem;
    box-shadow: none;

    &:hover,
    &:focus,
    &:focus-within {
      border-color: var(--filled-purple-100);
      background: var(--input-bg) !important;
      box-shadow: none;
    }
  }

  &:global(.ant-input-affix-wrapper) {
    padding: 0.38rem 0.7rem;

    :global(.ant-input) {
      background: transparent !important;
      color: var(--primary-text);
      font-family: var(--font-mono), monospace;
      font-size: 0.76rem;
    }

    :global(.ant-input-suffix),
    :global(.anticon) {
      color: var(--secondary-text);
    }
  }
}

.mcpActionRow {
  margin-top: 0.15rem;

  :global(.ant-btn) {
    height: 2rem;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
  }
}

.mcpCodeHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
  color: var(--secondary-text);

  .fieldLabel,
  label {
    margin-bottom: 0;
    color: var(--secondary-text) !important;
  }

  :global(.ant-btn) {
    height: 1.75rem;
    border-radius: 5px;
    font-size: 0.7rem;
    color: var(--secondary-text) !important;
  }
}

.mcpCodeBlock {
  width: 100%;
  max-height: 13rem;
  overflow: auto;
  margin: 0 0 1rem 0;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border-color-100);
  background: var(--input-bg);
  color: var(--primary-text) !important;
  font-family: var(--font-mono), monospace;
  font-size: 0.73rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;

  &:last-child {
    margin-bottom: 0;
  }
}

.mcpTokenList {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mcpTokenItem {
  padding: 0.85rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--border-color-100);
  background: var(--surface-hover);
}

.mcpTokenHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.3rem;
}

.mcpTokenTitle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--primary-text);
  font-size: 0.8rem;
  font-weight: 600;
}

.mcpTokenMeta {
  color: var(--secondary-text);
  font-size: 0.7rem;
  line-height: 1.5;
  margin-bottom: 0.7rem;
}

.safetySection {
  padding: 0.75rem 0;

  .safetySectionHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  .safetySectionTitle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-text);
    margin-bottom: 0.35rem;
  }

  .safetySectionDesc {
    font-size: 0.72rem;
    color: var(--secondary-text);
    line-height: 1.6;
    max-width: 480px;

    code {
      font-size: 0.68rem;
      color: #ff7875;
      background: rgba(255, 77, 79, 0.08);
      padding: 1px 4px;
      border-radius: 3px;
    }
  }
}

.dangerSwitch {
  &:where(.ant-switch-checked) {
    background: #ff4d4f !important;
  }
}

.notesSection {
  color: var(--secondary-text);
  font-size: 0.72rem;
  line-height: 1.7;

  strong {
    color: var(--primary-text);
    font-weight: 500;
  }

  ul {
    padding-left: 18px;
    margin-top: 4px;
    margin-bottom: 0;
  }

  code {
    font-size: 0.7rem;
    color: var(--primary-purple);
    background: rgba(127, 86, 217, 0.08);
    padding: 1px 4px;
    border-radius: 3px;
  }
}

.fieldHint {
  font-size: 0.65rem;
  color: var(--secondary-text);
}

.externalLink {
  color: var(--secondary-text);
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  transition: color 0.15s ease;

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

.modelModal {
  :global(.ant-modal-content) {
    background: var(--primary-bg) !important;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  }

  :global(.ant-modal-header) {
    background: transparent !important;
    border-bottom: 1px solid var(--border-subtle);
    margin: 0;
    padding: 0.9rem 1.25rem;
  }

  :global(.ant-modal-title) {
    color: var(--primary-text) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 0;
  }

  :global(.ant-modal-close) {
    color: var(--secondary-text);
    top: 0.7rem;
    right: 0.8rem;

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

  :global(.ant-modal-body) {
    padding: 1.1rem 1.25rem 1.25rem;
    color: var(--primary-text);
  }

  :global(.ant-form-item) {
    margin-bottom: 1rem;
  }

  :global(.ant-form-item-label > label) {
    color: var(--secondary-text) !important;
    font-size: 0.75rem;
    font-weight: 500;
  }

  :global(.ant-input),
  :global(.ant-input-affix-wrapper),
  :global(.ant-select-selector),
  :global(.ant-select-single .ant-select-selector) {
    min-height: 2.25rem !important;
    border-radius: 6px !important;
    background: var(--input-bg) !important;
    border-color: var(--border-color-100) !important;
    color: var(--primary-text) !important;
    box-shadow: none !important;
  }

  :global(.ant-input:hover),
  :global(.ant-input:focus),
  :global(.ant-input-affix-wrapper:hover),
  :global(.ant-input-affix-wrapper-focused),
  :global(.ant-select:hover .ant-select-selector),
  :global(.ant-select-focused .ant-select-selector) {
    border-color: var(--filled-purple-100) !important;
    background: var(--input-bg) !important;
    box-shadow: none !important;
  }

  :global(.ant-input),
  :global(.ant-input-affix-wrapper input),
  :global(.ant-select-selection-item),
  :global(.ant-select-selection-search-input) {
    color: var(--primary-text) !important;
  }

  :global(.ant-input::placeholder),
  :global(.ant-input-affix-wrapper input::placeholder),
  :global(.ant-select-selection-placeholder) {
    color: var(--secondary-text-500) !important;
  }

  :global(.ant-select-arrow),
  :global(.ant-input-suffix),
  :global(.anticon) {
    color: var(--secondary-text);
  }

  :global(.ant-form-item-explain-error) {
    color: var(--danger);
    font-size: 0.7rem;
  }
}

.modelSelectDropdown {
  background: var(--secondary-bg) !important;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 0.25rem;

  :global(.ant-select-item) {
    color: var(--secondary-text) !important;
    border-radius: 5px;
    min-height: 1.9rem;
    font-size: 0.78rem;
  }

  :global(.ant-select-item-option-active),
  :global(.ant-select-item-option-selected) {
    background: var(--surface-hover) !important;
    color: var(--primary-text) !important;
  }

  :global(.ant-select-item-empty) {
    color: var(--secondary-text) !important;
  }
}

.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;
  }

  :global(.ant-input-wrapper .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;
  }

  :global(.ant-input-wrapper .anticon) {
    pointer-events: all;
    cursor: pointer;
  }

  :global(.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;
  }
}