@use '../../styles/variables';

.thy-alpha {
    height: 8px;
    border-radius: 2px;
    display: block;
    cursor: variables.$hand-cursor;
    margin-top: 8px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==');
    background-position: left center;

    .gradient-container {
        width: 100%;
        height: 100%;
        position: relative;
    }
    .pointer {
        height: 8px;
        width: 8px;
        position: absolute;
        border-radius: 50%;
        cursor: variables.$hand-cursor;
        transform: translateX(-4px);
        z-index: 2;
        border: 2px solid variables.$white;
        box-shadow: variables.$color-picker-pointer-box-shadow;
    }
    .gradient-color {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 100%;
        z-index: 1;
        padding: 0 3px;
    }
    .pointer-container {
        width: 100%;
        height: 100%;
        position: relative;
    }
}
