@import 'variables'

%click-target
  pointer-events: all
  cursor: pointer

%reset-default-input
  border: none
  box-shadow: none
  outline: none

  &:active, &:hover, &:focus
    border: none
    outline: none
    box-shadow: none

%default-transition
  transition: all $default-transition-time ease-out

%border-radius
  border-radius: $default-border-radius

%flex-center-all
  display: flex
  justify-content: center
  align-items: center

%size-full
  width: 100%
  height: 100%

%pointer
  cursor: pointer

@mixin size($width,$height)
  width: $width
  height: $height

@mixin dotted-border($color, $dotWidth, $dotHeight)
  background: linear-gradient(90deg, #{$color} 50%, transparent 0) repeat-x, linear-gradient(90deg, #{$color} 50%, transparent 0) repeat-x, linear-gradient(0deg, #{$color} 50%, transparent 0) repeat-y, linear-gradient(0deg, #{$color} 50%, transparent 0) repeat-y
  background-size: #{$dotWidth}px #{$dotHeight}px, #{$dotWidth}px #{$dotHeight}px, #{$dotHeight}px #{$dotWidth}px, #{$dotHeight}px #{$dotWidth}px
  background-position: 0 0, 0 100%, 0 0, 100% 0

@keyframes linearGradientMove
  100%
    background-position: 6px 0, -6px 100%, 0 -6px, 100% 6px