@import './variables';
@import 'utilities/mixins';

@mixin corner {
  color: var(--slider-btn-normal-color);
  position: absolute;
  display: block;
  content: '∟';
  top: 5px;
}

.#{$framework-prefix}slider-button {
  border: 1px solid var(--slider-btn-normal-color);
  transition: var(--transition-time);
  background-color: var(--white);
  @include btn-by-default;
  position: relative;
  border-radius: 50%;
  $size: 27px;
  height: $size;
  width: $size;
  &.#{$framework-prefix}slider-left {
    margin-right: 32px;
    &:before {
      transform: rotate(45deg) translate(1px, -1px);
      @include corner;
    }
  }

  &.#{$framework-prefix}slider-right:before {
    transform: rotate(-135deg) translate(1px, -1px);
    @include corner;
  }
  &:hover {
    border-color: currentColor;
    color: var(--green);
  }
  &:active {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--white);
    &:before {
      color: var(--white);
    }
  }
}