@import '../styles';

@mixin bp-RotateAxisControl-button($direction) {
    position: relative;
    width: 24px;
    height: 25px;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;

    &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-#{$direction}: 5px solid $fours;
        transform: translateX(-50%) translateY(-50%);
        content: '';
    }

    &:focus,
    &:hover {
        &::after {
            border-#{$direction}: 5px solid $eights;
        }
    }
}

.bp-RotateAxisControl {
    display: flex;
    color: $bdl-gray-62;
    border: 1px solid $sf-fog;
    border-bottom-width: 2px;
    border-radius: 2px;
}

.bp-RotateAxisControl-label {
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

.bp-RotateAxisControl-left {
    @include bp-RotateAxisControl-button('right');
}

.bp-RotateAxisControl-right {
    @include bp-RotateAxisControl-button('left');
}
