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

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

  position: relative;
  display: block;
  overflow-x: hidden; // firefox TEXTAREA incorrectly applying ROWS= and COLS= https://bugzilla.mozilla.org/show_bug.cgi?id=33654
  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");
  }

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

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

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

    opacity: 1;
  }

  &.is-valid {
    padding-right: 36px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Cpath d='M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z M3.40550597,6.68901229 C2.99100286,7.0539857 2.95085113,7.6858763 3.31582458,8.1003794 L5.77477826,10.8930318 C6.1397517,11.3075349 6.7716423,11.3476866 7.18614541,10.9827132 C7.20478962,10.9662968 7.22281563,10.9491914 7.24018594,10.9314326 L11.8941565,6.17336831 C12.2803381,5.7785491 12.2733359,5.14542284 11.8785167,4.75924123 C11.4836975,4.37305961 10.8505712,4.38006176 10.4643896,4.77488097 L7.31720124,7.9924615 C6.93101963,8.3872807 6.29789337,8.3942828 5.90307416,8.0081012 C5.88531533,7.9907309 5.86820993,7.9727049 5.85179355,7.9540607 L4.81687313,6.77869369 C4.45189969,6.36419058 3.82000909,6.32403885 3.40550597,6.68901229 Z' fill='%2332c832' /%3E%3C/svg%3E");
    background-size: 16px;
    background-position: top #{convert.to-rem(10px)} right
      #{convert.to-rem(10px)};
    background-repeat: no-repeat;
  }
}

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

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