@value (
  colorFocusPrimary,
  colorButtonFillGhostPressed,
  colorTextPrimary
) from '../../styles/variables/_color.css';

@value (
  size18,
  size24,
  size36
) from '../../styles/variables/_size.css';

@value (
  spaceNone
) from '../../styles/variables/_space.css';

@value (
  borderRadiusXSmall,
  borderRadiusRadioButton,
  borderWidthNone,
  borderWidthTertiary
) from '../../styles/variables/_border.css';

button {
  background: none;
  border: none;
}

.button {
  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
  display: flex;
  padding: spaceNone;
  justify-content: center;
  align-items: center;
  outline: none;
  cursor: pointer;
}

.large {
  height: size36;
  width: size36;
  border-radius: borderRadiusRadioButton;
}

.medium {
  height: size24;
  width: size24;
  border-radius: borderRadiusXSmall;
}

.small {
  height: size18;
  width: size18;
  border-radius: borderRadiusXSmall;
}

.button:focus-visible:not(:disabled) {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}

.button:hover:not(:disabled) {
  background-color: colorButtonFillGhostPressed;
  color: colorTextPrimary;
}