wix-style-react/dist/src/CloseButton/CloseButton.st.css

wix-style-react

@st-import [
  --wds-border-radius-full,
  --wds-shadow-focus-standard,
  --wds-button-size-x-tiny,
  --wds-button-size-tiny,
  --wds-button-size-small,
  --wds-color-fill-standard-primary-hover,
  --wds-color-fill-standard-primary-active,
  --wds-color-fill-standard-primary-disabled,
  --wds-color-fill-standard-secondary,
  --wds-color-fill-standard-secondary-hover,
  --wds-color-fill-standard-secondary-active,
  --wds-color-fill-standard-secondary-disabled,
  --wds-color-fill-light-primary,
  --wds-color-fill-light-primary-hover,
  --wds-color-fill-light-primary-active,
  --wds-color-fill-light-primary-disabled,
  --wds-color-fill-dark-primary,
  --wds-color-fill-dark-primary-hover,
  --wds-color-fill-dark-primary-active,
  --wds-color-fill-dark-primary-disabled,
  --wds-color-fill-transparent-primary,
  --wds-color-fill-transparent-primary-active,
  --wds-color-fill-transparent-primary-hover,
  --wds-color-fill-transparent-primary-disabled,
  --wds-color-text-primary,
  --wds-color-text-standard-primary-light,
  --wds-color-text-disabled-light,
] from '@wix/design-system-tokens/all.st.css';

@st-namespace "CloseButton";

:import {
  -st-from: '../Button/ButtonCore/ButtonCore.st.css';
  -st-default: ButtonCore;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: THEME-COLOR-10, D80, THEME-COLOR-20, THEME-COLOR-40, THEME-COLOR-50, D80, D10, D20, B30, F00, D10-20, D20-48, D20-54, D20-60, D80-70, D10-30;
}

:import {
  -st-from: "../Foundation/stylable/shadows.st.css";
  -st-named: s5, s6, s7;
}

:import {
  -st-from: '../Foundation/stylable/easing.st.css';
  -st-named: ease-9, speed-fast-1;
}

.root {
  -st-extends: ButtonCore;
  -st-states: skin(string), size(string);
  width: var(--wds-button-size-x-tiny, 18px);
  height: var(--wds-button-size-x-tiny, 18px);
  border-radius: var(--wds-border-radius-full, 1000px);
  padding: 0px;

  box-sizing: border-box;
  text-align: center;

  border: none;
  outline: none;

  transition-duration: value(speed-fast-1);
  transition-timing-function: value(ease-9);
  transition-property: background-color, color, border-color;

  border-color: transparent;
  background-color: transparent;

  color: var(--wds-color-text-primary, value(THEME-COLOR-10));
}

.root:focus-visible {
  box-shadow: var(--wds-shadow-focus-standard, 0 0 0 3px value(F00));
}

.root:hover {
  color: var(--wds-color-fill-standard-primary-hover, value(THEME-COLOR-20));
}

.root:active {
  color: var(--wds-color-fill-standard-primary-active, value(THEME-COLOR-10));
}

.root:disabled {
  color: var(--wds-color-fill-standard-primary-disabled, value(D10-30));
}

.root::content {
  line-height: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Skin: standardFilled */

.root:skin(standardFilled) {
  background-color: var(--wds-color-fill-standard-secondary, value(THEME-COLOR-50));
  color: var(--wds-color-text-primary, value(THEME-COLOR-10));
}

.root:skin(standardFilled):hover {
  background-color: var(--wds-color-fill-standard-secondary-hover, value(THEME-COLOR-40));
  color: var(--wds-color-text-primary, value(THEME-COLOR-10));
}

.root:skin(standardFilled):active {
  background-color: var(--wds-color-fill-standard-secondary-active, value(B30));
  color: var(--wds-color-text-primary, value(THEME-COLOR-10));
}

.root:skin(standardFilled):disabled {
  background-color: var(--wds-color-fill-standard-secondary-disabled, value(D10-30));
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

/* Skin: light */

.root:skin(light) {
  color: var(--wds-color-fill-light-primary, value(D80));
}

.root:skin(light):hover {
  color: var(--wds-color-fill-light-primary-hover, value(THEME-COLOR-50));
}

.root:skin(light):active {
  color: var(--wds-color-fill-light-primary-active, value(THEME-COLOR-40));
}

.root:skin(light):disabled {
  color: var(--wds-color-fill-light-primary-disabled, value(D80-70));
}

/* Skin: dark */

.root:skin(dark) {
  color: var(--wds-color-fill-dark-primary, value(D10));
}

.root:skin(dark):hover {
  color: var(--wds-color-fill-dark-primary-hover, value(D20));
}

.root:skin(dark):active {
  color: var(--wds-color-fill-dark-primary-active, value(D10));
}

.root:skin(dark):disabled {
  color: var(--wds-color-fill-dark-primary-disabled, value(D10-30));
}

/* Skin: lightFilled */

.root:skin(lightFilled) {
  background-color: var(--wds-color-fill-transparent-primary, value(s5));
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(lightFilled):hover {
  background-color: var(--wds-color-fill-transparent-primary-hover, value(s6));
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(lightFilled):active {
  background-color: var(--wds-color-fill-transparent-primary-active, value(s7));
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(lightFilled):disabled {
  background-color: var(--wds-color-fill-transparent-primary-disabled, value(D10-30));
  color: var(--wds-color-text-disabled-light, value(D80-70));
}

/* Skin: transparent */

.root:skin(transparent) {
  background-color: var(--wds-color-fill-transparent-primary, value(D20-48));
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(transparent):hover {
  background-color: var(--wds-color-fill-transparent-primary-hover, value(D20-54));
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(transparent):active {
  background-color: var(--wds-color-fill-transparent-primary-active, value(D20-60));
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(transparent):disabled {
  background-color: var(--wds-color-fill-transparent-primary-disabled, value(D10-20));
  color: var(--wds-color-text-disabled-light, value(D80-70));
}

/* Size */

.root:size(medium) {
  width: var(--wds-button-size-tiny, 24px);
  height: var(--wds-button-size-tiny, 24px);
}

.root:size(large) {
  width: var(--wds-button-size-small, 30px);
  height: var(--wds-button-size-small, 30px);
}

/* st-namespace-reference="../../../src/CloseButton/CloseButton.st.css" */