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

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

    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      width: 200%;
      height: 200%;
      transform: scale(0.5, 0.5);
      transform-origin: 0 0;
    }
  }
}