@use "../../../../styles/tools/generate";
@use "./config";

@mixin base($config: config.$base) {
  @include generate.css-map($config);

  position: relative;
  display: inline-block;
  transform: translateZ(0);
}

@mixin states($config: config.$states) {
  @include generate.css-map($config, "default");

  &:focus {
    @include generate.css-map($config, "focus");
  }

  &:disabled {
    @include generate.css-map($config, "disabled");
  }

  &.is-invalid {
    @include generate.css-map($config, "invalid");
  }
}

@mixin size($size, $config: config.$sizes) {
  @include generate.css-map($config, $size);
}

@mixin width($width, $config: config.$widths) {
  @include generate.css-map($config, $width);
}