/*
  Note: If you add a color here, please add it to "/stories/base/colors.css" as well
*/

/* ==========================================================================
  Fonts
  ========================================================================== */

/* ==========================================================================
  All typography variants

  $unit - Either em or rem
  ========================================================================== */

.picker-container :global(.rc-slider-handle) {
        width: 2.5rem;
        height: 2.5rem;
        z-index: 2;
        margin-top: -1.25rem;
        margin-left: -1.25rem;
        transform: scale(1);
        border-width: 0;
        background-color: #d4b58b;
        box-shadow: 0 0 0 0.4rem #fff
    }

.picker-container :global(.rc-slider-handle):hover {
            background-color: #ddc4a2;
            cursor: pointer;
        }

.picker-container :global(.rc-slider-handle):focus {
            background-color: #ddc4a2;
            box-shadow: 0 0 0 0.4rem #fff;
        }

.picker-container :global(.rc-slider-handle):active {
            transform: scale(0.8);
            background-color: #ddc4a2;
            box-shadow: 0 0 0 0.4rem #fff;
            cursor: all-scroll;
            transition: transform 0.2s ease-in-out;
        }

.picker-container :global(.rc-slider-dot) {
        position: absolute;
        top: 0;
        width: 0.1rem;
        height: 1rem;
        margin-left: 0;
        vertical-align: middle;
        border: 0;
        opacity: 0.3;
        background-color: #4b453d;
        border-radius: 0
    }

.picker-container :global(.rc-slider-dot):first-child,
        .picker-container :global(.rc-slider-dot):last-child {
            top: -1rem;
            height: 2rem;
        }

.picker-container :global(.rc-slider-dot)::after {
            content: "";
            position: absolute;
            top: -1rem;
            right: -1rem;
            bottom: 0;
            left: -1rem;
            cursor: pointer;
        }

.picker-container :global(.rc-slider-dot-active) {
        border-width: 0;
    }

.picker-container :global(.rc-slider-rail) {
        position: absolute;
        width: 100%;
        height: 0.1rem;
        opacity: 0.3;
        background-color: #4b453d;
        border-radius: 0;
    }

.picker-container :global(.rc-slider-track) {
        position: absolute;
        left: 0;
        height: 0.2rem;
        z-index: 1;
        background-color: #d4b58b;
        border-radius: 0;
    }

.picker-container :global(.rc-slider-mark-text) {
        font-family: "IbmPlexMono", monospace;
        font-weight: 400;
        font-size: 1.6rem;
        line-height: calc(2.4em / 1.6);
        opacity: 0.7;
        color: #4b453d;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }

.picker-container :global(.rc-slider-mark-text-active) {
        font-family: "IbmPlexMono", monospace;
        font-weight: 400;
        font-size: 1.6rem;
        line-height: calc(2.4em / 1.6);
        opacity: 0.7;
        color: #4b453d;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }

.picker-container :global(.handle-hover) {
        background-color: #ddc4a2;
    }

.picker-container .rc-slider-main :global(.rc-slider-handle) {
        transition: left 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22), background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    }

.picker-container .rc-slider-main :global(.rc-slider-track) {
        transition: width 0.4s cubic-bezier(0.895, 0.03, 0.685, 0.22), background-color 0.2s ease-in-out;
    }