@import '~@capillarytech/cap-ui-library/styles/_variables.scss';

.sender-details {
  --sd-padding: #{$CAP_SPACE_48}; // 48px - same as other slideboxes
  --sd-content-gap: #{$CAP_SPACE_16};
  --sd-error-color: #ff4d4f;
  --sd-select-width: 20.375rem; // 326px

  padding: 0 var(--sd-padding);

  &__back-icon {
    cursor: pointer;
    margin-right: $CAP_SPACE_16;
  }

  &__content {
    flex-direction: column;
    gap: var(--sd-content-gap);
  }

  &__field {
    flex-direction: column;
    margin-bottom: $CAP_SPACE_08;
  }

  &__display-value {
    margin-top: $CAP_SPACE_04;
  }

  &__select {
    margin-bottom: $CAP_SPACE_16;
    width: var(--sd-select-width);
    min-width: var(--sd-select-width);
  }

  &__reset-link {
    padding: $CAP_SPACE_08 $CAP_SPACE_16;
    margin: -0.8rem 0 0 0;
    background: none;
    border: none;
    color: $FONT_COLOR_05;
    font-size: $FONT_SIZE_M;
    font-weight: $FONT_WEIGHT_MEDIUM;
    line-height: $CAP_SPACE_20;
    cursor: pointer;
  }

  &__error {
    color: var(--sd-error-color);
  }

  &__field-error {
    margin-top: -$CAP_SPACE_08;
    width: var(--sd-select-width);
    min-width: var(--sd-select-width);
    max-width: var(--sd-select-width);
    display: block;
    box-sizing: border-box;
  }

  &__footer {
    justify-content: flex-end;
  }
  &__account-name-tooltip {
    .ant-tooltip-content {
      width: 21.3rem;
    }
  }
}
