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

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

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

@value (
  borderRadiusXSmall,
  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;
}

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

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

.button:focus {
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}