components/Carousel/style/token.less
@import '../../style/theme/default.less';

@carousel-content-border-radius: 0;

// arrow
@carousel-arrow-position: @spacing-6;
@carousel-arrow-size: @size-6;
@carousel-arrow-font-size: @font-size-body-3;
@carousel-arrow-color-icon: var(~'@{arco-cssvars-prefix}-color-white');
@carousel-arrow-color-bg: rgba(@color-white, 0.3);
@carousel-arrow-color-bg_hover: rgba(@color-white, 0.5);
@carousel-arrow-color-box-shadow: var(~'@{arco-cssvars-prefix}-color-primary-light-3');

// indicator
@carousel-indicator-size-wrapper: @size-12;
@carousel-indicator-color-bg-wrapper: rgba(0, 0, 0, 0.15);

@carousel-indicator-dot-size: 6px;
@carousel-indicator-line-size-width: @size-3;
@carousel-indicator-line-size-height: @size-1;
@carousel-indicator-slider-size-width: @size-12;
@carousel-indicator-slider-size-height: @size-1;

@carousel-indicator-position: @spacing-6;
@carousel-indicator-gap: @spacing-4;
@carousel-indicator-border-radius: @radius-medium;
@carousel-indicator-color_default: rgba(@color-white, 0.3);
@carousel-indicator-color_active: var(~'@{arco-cssvars-prefix}-color-white');

@carousel-indicator-outer-border-radius: 20px;
@carousel-indicator-outer-padding: @spacing-2;
@carousel-indicator-outer-color_default: rgba(var(~'@{arco-cssvars-prefix}-gray-4'), 0.5);
@carousel-indicator-outer-color_active: var(~'@{arco-cssvars-prefix}-color-fill-4');
@carousel-indicator-outer-color-bg: @color-transparent;
