@use 'sass:string';
@use '@style/theme/index.scss' as theme;
@use '@components/secret/style/token.scss' as *;

$secret-prefix-cls: string.unquote('#{theme.$prefix}-secret');

.#{$secret-prefix-cls} {
  display: inline-flex;
  gap: $secret-gap;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;

  &-content {
    flex: 1 1 auto;
    min-width: 0;
  }

  &-placeholder {
    overflow: hidden;
    color: $secret-placeholder-color-text;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &-trigger {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: $secret-trigger-color-text;
    background: transparent;
    border: 0;
    border-radius: $secret-trigger-border-radius;
    cursor: pointer;

    .sd-icon {
      font-size: $secret-trigger-size-icon;
    }

    &:hover {
      color: $secret-trigger-color-text_hover;
    }
  }
}