{
  "version": 3,
  "sources": ["../src/css/picobel.skeleton.css"],
  "sourcesContent": [".skeleton.picobel {\n    --black: #555;\n    --white: #ffffff;\n    --grey: #ccc;\n    --grey--light: #eee;\n    --chrome-focus-blue: #015ecc;\n\n    --progress-height: 32px;\n    --progress-inner-height: calc(var(--progress-height) - 2px);\n\n    --skeleton-focus: var(--chrome-focus-blue);\n    --skeleton-background: var(--white);\n    --skeleton-text: var(--black);\n    --skeleton-progress: var(--grey);\n    --skeleton-progress-bg: var(--white);\n    --skeleton-buffered: var(--grey--light);\n}\n\n/* Global */\n.skeleton.picobel *,\n.skeleton.picobel *:before,\n.skeleton.picobel *:after {\n    box-sizing: inherit;\n}\n.skeleton.picobel *:focus {\n    outline: 2px solid var(--skeleton-focus);\n    outline-offset: 1px;\n    border-radius: 2px;\n}\n.skeleton.picobel {\n    font-size: inherit;\n    position: relative;\n    box-sizing: border-box;\n    z-index: 1;\n\n    /* Wrapper */\n    margin: 10px 0;\n    height: 64px;\n    border: 1px solid var(--skeleton-text);\n}\n\n/* Simulates an infinite slide-to-the-right effect. */\n@keyframes skeleton_background_slide {\n    0% {\n        background-position: 0 0;\n    }\n    100% {\n        background-position: 20px 0;\n    }\n}\n\n/* The loading-state indicator */\n.skeleton__loader {\n    position: absolute;\n    display: none;\n    z-index: 5;\n    bottom: -1px;\n    left: 183px;\n    right: 0;\n    height: var(--progress-height);\n    border-top: 1px solid var(--skeleton-text);\n    border-bottom: 1px solid var(--skeleton-text);\n    background: linear-gradient(\n        to right,\n        var(--skeleton-background) 50%,\n        var(--skeleton-text) 50%\n    );\n    background-size: 20px 20px;\n    background-repeat: repeat;\n    background-position: 0 0;\n    animation: skeleton_background_slide linear infinite 0.4s;\n}\n\n/* Only show the loader when we're loading */\n.skeleton.loading .skeleton__loader {\n    display: block;\n}\n\n/* The play-pause button */\n.skeleton__play-pause {\n    font-size: 10px;\n    border: 1px solid var(--skeleton-text);\n    appearance: none;\n    width: 64px;\n    height: 64px;\n    background: var(--skeleton-background);\n    position: absolute;\n    top: -1px;\n    left: -1px;\n    cursor: pointer;\n}\n\n.skeleton__play-pause__text {\n    display: none;\n}\n\n.skeleton__play-pause:focus {\n    z-index: 3;\n}\n\n/* The \"play\" icon */\n.skeleton__play-pause:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-40%, -50%);\n    border-top: 10px solid transparent;\n    border-left: 12px solid var(--skeleton-text);\n    border-bottom: 10px solid transparent;\n}\n\n/* The \"pause\" icon */\n.skeleton__play-pause.playing:before {\n    height: 18px;\n    width: 16px;\n    transform: translate(-50%, -50%);\n    border-top: 0;\n    border-left: 6px solid var(--skeleton-text);\n    border-right: 6px solid var(--skeleton-text);\n    border-bottom: 0;\n}\n\n/* Display song info */\n.skeleton__wrapper--title-artist {\n    padding: 0 10px 0 74px;\n    height: 64px;\n    background: var(--skeleton-background);\n    color: var(--skeleton-text);\n    line-height: 1.6;\n}\n.skeleton__title {\n    display: inline-block;\n    line-height: 1;\n    font-weight: bold;\n    font-family: monospace;\n}\n\n.skeleton__artist {\n    font-family: monospace;\n    display: inline-block;\n    margin-left: 5px;\n    line-height: 1;\n}\n.skeleton__artist:not(:empty):before {\n    content: \" \u2013 \";\n}\n\n/* Display info about time-played and song-duration */\n.skeleton__wrapper--timer-progress-duration {\n    position: absolute;\n    bottom: -1px;\n    left: 182px;\n    right: 0;\n    height: 32px;\n    border-left: 1px solid var(--skeleton-text);\n}\n.skeleton__timer,\n.skeleton__duration {\n    position: absolute;\n    bottom: 0;\n    z-index: 4;\n    text-align: left;\n    background: transparent;\n    color: var(--skeleton-text);\n    line-height: 1;\n    pointer-events: none;\n    font-size: 14px;\n    height: 32px;\n    padding: 10px 5px 9px 10px;\n    font-family: monospace;\n}\n.skeleton__timer {\n    left: 0;\n}\n.skeleton__duration {\n    right: 0;\n    text-align: right;\n}\n\n/* Hide song-timings when we're loading */\n.skeleton.loading .skeleton__timer,\n.skeleton.loading .skeleton__duration {\n    display: none;\n}\n\n/* The \"fake\" range slider */\n.skeleton__progress-slider__wrapper {\n    height: var(--progress-height);\n    font-size: 10px;\n    line-height: 1;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n.skeleton__progress-slider__replacement {\n    position: relative;\n    background: var(--skeleton-background);\n    border-top: 1px solid var(--skeleton-text);\n    border-bottom: 1px solid var(--skeleton-text);\n    height: var(--progress-height);\n    overflow: hidden;\n}\n.skeleton__progress-slider__replacement.focus {\n    outline: 2px solid var(--skeleton-focus);\n    outline-offset: 1px;\n    border-radius: 2px;\n    z-index: 3;\n}\n.skeleton__progress-slider__background {\n    transition: width 0.2s;\n    height: var(--progress-inner-height);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    background: var(--skeleton-progress-bg);\n}\n.skeleton__progress-slider__buffered {\n    height: var(--progress-inner-height);\n    position: absolute;\n    top: 0;\n    left: 0;\n    background: var(--skeleton-buffered);\n}\n.skeleton__progress-slider__indicator {\n    height: var(--progress-inner-height);\n    position: absolute;\n    top: 0;\n    left: 0;\n    background: var(--skeleton-progress);\n    width: 0%;\n}\n.skeleton__progress-slider__playhead {\n    width: 8px;\n    height: var(--progress-inner-height);\n    position: absolute;\n    top: 0;\n    left: 0%;\n    margin-left: -4px;\n    background: var(--skeleton-text);\n}\n\n/* Hide dynamic elements until loading has finished */\n.skeleton.loading .skeleton__progress-slider__indicator,\n.skeleton.loading .skeleton__progress-slider__playhead {\n    display: none;\n}\n\n/* Make sure the real range element is the same size as the fake one. Position it on-top of the fake and make it invisible (so we can still get the functionality) */\n.skeleton__progress-slider__range {\n    width: 100%;\n    height: var(--progress-height);\n    padding: 0;\n    margin: 0;\n    z-index: 4;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n}\n\n/* Make sure the range Track is the right size and shape. Needs prefixed versions to ensure cross-browser consistency. */\n.skeleton__progress-slider__range::-webkit-slider-runnable-track {\n    width: 100%;\n    height: var(--progress-height);\n    cursor: pointer;\n}\n.skeleton__progress-slider__range::-moz-range-track {\n    width: 100%;\n    height: var(--progress-height);\n    cursor: pointer;\n}\n.skeleton__progress-slider__range::-ms-track {\n    width: 100%;\n    height: var(--progress-height);\n    cursor: pointer;\n}\n\n/* Position the volume controls */\n.skeleton__wrapper--mute-volume {\n    position: absolute;\n    bottom: -1px;\n    left: 62px;\n    width: 120px;\n    height: 32px;\n    z-index: 2;\n    border-top: 1px solid var(--skeleton-text);\n    border-bottom: 1px solid var(--skeleton-text);\n    background: var(--skeleton-background);\n    display: flex;\n    align-items: center;\n}\n.skeleton__mute {\n    display: block;\n    z-index: 2;\n    float: left;\n    width: 32px;\n    height: 32px;\n    font-size: 10px;\n    color: transparent;\n    border: 0;\n    appearance: none;\n    background: var(--skeleton-background);\n    border: 1px solid var(--skeleton-text);\n    position: relative;\n    cursor: pointer;\n    overflow: hidden;\n    flex-shrink: 0;\n}\n\n/* Rectangle part of \"speaker cone\" icon */\n.skeleton__mute:before {\n    display: block;\n    width: 6px;\n    height: 6px;\n    position: absolute;\n    content: \"\";\n    top: 50%;\n    right: 50%;\n    margin-right: -1px;\n    transform: translateY(-50%);\n    background: var(--skeleton-text);\n}\n\n/* Triangle part of \"speaker cone\" icon */\n.skeleton__mute:after {\n    display: block;\n    width: 5px;\n    height: 5px;\n    position: absolute;\n    content: \"\";\n    top: 50%;\n    transform: translateY(-50%);\n    right: 50%;\n    margin-right: -4px;\n    border-top: 8px solid transparent;\n    border-right: 8px solid var(--skeleton-text);\n    border-bottom: 8px solid transparent;\n}\n\n/* Change icon when muted */\n.skeleton__mute.muted:before {\n    background: var(--skeleton-progress);\n}\n.skeleton__mute.muted:after {\n    border-right-color: var(--skeleton-progress);\n}\n\n.skeleton__volume {\n    --volume-padding: 6px;\n    --volume-height: 20px;\n    --volume-width: 76px;\n    width: var(--volume-width) + var(--volume-padding) * 2;\n    height: var(--volume-height) + var(--volume-padding) * 2;\n    padding: var(--volume-padding);\n}\n\n.skeleton__volume-label {\n    display: none;\n}\n\n/* As with the playback indicator, we're using a range element to power the volume slider functionality */\n.skeleton__volume-slider__wrapper {\n    width: var(--volume-width);\n    height: var(--volume-height);\n    position: relative;\n}\n.skeleton__volume-slider__replacement {\n    display: block;\n    height: var(--volume-height);\n    width: var(--volume-width);\n    position: relative;\n    left: 0;\n    z-index: 3;\n    background: var(--skeleton-progress);\n    flex-grow: 1;\n    float: left;\n    transform: rotate(180deg);\n}\n.skeleton__volume-slider__replacement:after {\n    content: \"\";\n    display: block;\n    border-right: var(--volume-width) solid var(--skeleton-background);\n    border-top: var(--volume-height) solid transparent;\n    position: absolute;\n    top: 0;\n    left: 0;\n    pointer-events: none;\n}\n.skeleton__volume-slider__replacement.focus {\n    outline: 2px solid var(--skeleton-focus);\n    outline-offset: 1px;\n    border-radius: 2px;\n}\n\n.skeleton__volume-slider__indicator {\n    height: 100%;\n    position: absolute;\n    top: 0;\n    right: 0;\n    background: var(--skeleton-text);\n    width: var(--volume-width);\n}\n.skeleton__volume-slider__playhead {\n    display: none;\n}\n\n/* Make sure the real range element is the same size as the fake one. Position it on-top of the fake and make it invisible (so we can still get the functionality) */\n.skeleton__volume-slider__range {\n    width: 100%;\n    height: var(--volume-height);\n    padding: 0;\n    margin: 0;\n    position: absolute;\n    z-index: 4;\n    top: 0;\n    left: 0;\n    opacity: 0;\n}\n\n/* Make sure the range Track is the right size and shape. Needs prefixed versions to ensure cross-browser consistency. */\n.skeleton__volume-slider__range::-webkit-slider-runnable-track {\n    width: 100%;\n    height: var(--volume-height);\n    cursor: pointer;\n}\n.skeleton__volume-slider__range::-moz-range-track {\n    width: 100%;\n    height: var(--volume-height);\n    cursor: pointer;\n}\n.skeleton__volume-slider__range::-ms-track {\n    width: 100%;\n    height: var(--volume-height);\n    cursor: pointer;\n}\n"],
  "mappings": "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",
  "names": []
}