& {
    position: absolute;
    border-radius: 7px;

    &[x],
    &.x {
        left: 0;
        height: 12px;
        width: 100px;
        bottom: 0;
    }

    &[y],
    &.y {
        border-left: 3px solid transparent;
        top: 0;
        height: 100px;
        width: 6px;
        right: 0;
    }

    &:hover,
    &:active {
        >.thumb {
            opacity: 1 !important;
            overflow: visible;
        }
    }

    >.thumb {
        &:after {
            position: absolute;
            top: 0;
            bottom: 0;
            left: -4px;
            right: -4px;
            width: auto;
            display: block;
            content: "";
        }

        transition: opacity .2s;
        position: absolute;
        border-radius: 7px;
        height: 100%;
        width: 100%;
        background-color: #29c9;
    }
}