@mixin defineColorHSL($color, $hue, $saturation, $lightness) {
  #{$color}: unquote("hsl(#{$hue}, #{$saturation}, #{$lightness})");
  // #{$color}-h: #{$hue};
  // #{$color}-s: #{$saturation};
  // #{$color}-l: #{$lightness};
  #{$color}-light: unquote("hsla(#{$hue}, #{$saturation}, #{$lightness}, 0.8)");
  // #{$color}-light-h: #{$hue};
  // #{$color}-light-s: #{$saturation};
  // #{$color}-light-l: #{$lightness};
  // #{$color}-lighter: unquote("hsl(#{$hue}, #{$saturation}, 95%)");
  // #{$color}-lighter-h: #{$hue};
  // #{$color}-lighter-s: #{$saturation};
  // #{$color}-lighter-l: 95%;
  #{$color}-dark: unquote("hsl(#{$hue}, #{$saturation}, #{$lightness - 4})");
  // #{$color}-darker: unquote("hsl(#{$hue}, #{$saturation}, 20%)");
  // #{$color}-darker-h: #{$hue};
  // #{$color}-darker-s: #{$saturation};
  // #{$color}-darker-l: 20%;
}

@mixin placeholder {
  &::placeholder {
    @content;
  }
}

@mixin clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }

  &:after {
    clear: both;
  }
}

@mixin onepx($positions: top right bottom left, $border-color: var(--border-color), $border-radius: 0) {
  &:after {
    content: '';
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: $border-radius;
    @each $position in $positions {
      border-#{$position}: 1px solid $border-color;
    }

    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      transform-origin: 0 0;
      border-radius: $border-radius * 2;
    }
  }
}