{
  "version": 3,
  "sources": ["../src/css/picobel.default.css"],
  "sourcesContent": [".default.picobel {\n    --black: #555; /* (0, 0%, 33.3%) */\n    --black--light: hsl(0, 0%, 43.3%);\n    --black--opacity: rgba(0, 0, 0, 0.3);\n    --white: #ffffff;\n    --grey: #dad8d2; /* hsl(30, 10%, 85%) */\n    --greyDark: hsl(30, 10%, 65%);\n    --primary: #ddd;\n    --primary--opacity: rgba(221, 221, 221, 0.4);\n    --highlight: #00b7c6;\n    --background_grey_dark: #e6e6e6;\n    --background_grey_light: #f1f1f1;\n    --focus: #015ecc;\n\n    --progress-bar-height: 20px;\n}\n\n/* Simulates an infinite slide-to-the-right effect. */\n@keyframes default_background_slide {\n    0% {\n        background-position: 0 0;\n    }\n    100% {\n        background-position: 20px 0;\n    }\n}\n\n/* Global */\n.default.picobel {\n    font-size: 10px;\n    position: relative;\n    box-sizing: border-box;\n    z-index: 1;\n\n    /* Wrapper */\n    margin: 10px 0;\n    height: 60px;\n    border-radius: 3px;\n    box-shadow: var(--black--opacity) 0 1px 2px 0;\n    background-image: linear-gradient(\n        var(--background_grey_light),\n        var(--background_grey_dark)\n    );\n}\n\n.default.picobel *,\n.default.picobel *:before,\n.default.picobel *:after {\n    box-sizing: inherit;\n}\n\n.default.picobel *:focus {\n    outline: 2px solid var(--focus);\n    outline-offset: 1px;\n    border-radius: 2px;\n}\n\n/* The loading-state indicator */\n.default__loader {\n    position: absolute;\n    z-index: 2;\n    bottom: 0;\n    left: 56px;\n    right: 0;\n    height: var(--progress-bar-height);\n    opacity: 0;\n    transition: opacity 0.2s;\n    pointer-events: none;\n    background: linear-gradient(\n        to right,\n        var(--highlight) 50%,\n        var(--black) 50%\n    );\n    background-size: var(--progress-bar-height) var(--progress-bar-height);\n    background-repeat: repeat;\n    background-position: 0 0;\n    animation: default_background_slide linear infinite 0.4s;\n}\n\n/* Only show the loader when we're loading */\n.default.loading .default__loader {\n    opacity: 1;\n}\n\n/* The play-pause button */\n.default__play-pause {\n    font-size: 10px;\n    border: none;\n    appearance: none;\n    width: 40px;\n    height: 60px;\n    color: var(--white);\n    background: var(--black);\n    background-image: linear-gradient(var(--black--light), var(--black));\n    box-shadow: inset var(--black--light) -1px 0 0 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    cursor: pointer;\n}\n.default__play-pause:focus {\n    z-index: 3;\n}\n.default__play-pause__text {\n    display: none;\n}\n\n/* The \"play\" icon */\n.default__play-pause:before {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    margin-top: -8px;\n    margin-left: -4px;\n    border-top: 8px solid transparent;\n    border-left: 10px solid var(--white);\n    border-bottom: 8px solid transparent;\n}\n\n/* Hidden right side of \"pause\" icon (shown when paused) */\n.default__play-pause:after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    top: 50%;\n    right: 50%;\n    height: 14px;\n    margin-top: -7px;\n    margin-right: -7px;\n    border-top: 0;\n    border-left: 5px solid var(--white);\n    border-bottom: 0;\n    opacity: 0;\n}\n\n/* The left side of the \"pause\" icon */\n.default__play-pause.playing:before {\n    height: 14px;\n    margin-top: -7px;\n    margin-left: -7px;\n    border-top: 0;\n    border-left: 5px solid var(--white);\n    border-bottom: 0;\n}\n\n/* Make the right side visible */\n.default__play-pause.playing:after {\n    opacity: 1;\n}\n\n/* Display song info */\n.default__wrapper--title-artist {\n    padding: 10px 20px 10px 70px;\n    height: 44px;\n    background: var(--primary);\n    color: var(--black);\n    text-shadow: var(--white) 0 1px 0;\n    background-image: linear-gradient(\n        var(--background_grey_light),\n        var(--background_grey_dark)\n    );\n}\n.default__title {\n    display: inline-block;\n    line-height: 1;\n    font-weight: bold;\n    font-family: monospace;\n}\n\n.default__artist {\n    font-family: monospace;\n    display: inline-block;\n    line-height: 1;\n    margin-left: 5px;\n}\n.default__artist:not(:empty):before {\n    content: \" \u2013 \";\n}\n\n/* Display info about time-played and song-duration */\n.default__wrapper--timer-progress-duration {\n    position: absolute;\n    bottom: 0;\n    left: 56px;\n    right: 0;\n    height: var(--progress-bar-height);\n}\n.default__timer,\n.default__duration {\n    position: absolute;\n    top: 0;\n    z-index: 3;\n    width: 60px;\n    text-align: left;\n    background: transparent;\n    color: var(--white);\n    line-height: 10px;\n    height: var(--progress-bar-height);\n    pointer-events: none;\n    font-size: 10px;\n    padding: 5px 5px 5px 10px;\n    font-family: monospace;\n}\n.default__timer {\n    left: 0;\n}\n.default__duration {\n    right: 0;\n    text-align: right;\n}\n\n/* Hide song-timings when we're loading */\n.default.loading .default__timer,\n.default.loading .default__duration {\n    display: none;\n}\n\n/* Progress slider positioner */\n.default__progress-slider__wrapper {\n    height: var(--progress-bar-height);\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n}\n/* The \"fake\" range slider */\n.default__progress-slider__replacement {\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    background: var(--black--light);\n    border-bottom-right-radius: 2px;\n    overflow: hidden;\n}\n.default__progress-slider__replacement.focus {\n    outline: 2px solid var(--focus);\n    outline-offset: 1px;\n    border-radius: 2px;\n}\n.default__progress-slider__indicator {\n    height: var(--progress-bar-height);\n    position: absolute;\n    top: 0;\n    left: 0;\n    background: var(--primary--opacity);\n    width: 0%;\n}\n.default__progress-slider__buffered {\n    height: var(--progress-bar-height);\n    position: absolute;\n    top: 0;\n    left: 0;\n    background: var(--black);\n}\n.default__progress-slider__playhead {\n    width: 5px;\n    height: var(--progress-bar-height);\n    position: absolute;\n    top: 0;\n    left: 0%;\n    margin-left: -2px;\n    background: var(--highlight);\n}\n\n/* Hide dynamic elements until loading has finished */\n.default.loading .default__progress-slider__indicator,\n.default.loading .default__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.default__progress-slider__range {\n    width: 100%;\n    height: var(--progress-bar-height);\n    font-size: inherit;\n    padding: 0;\n    margin: 0;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n}\n/* Make sure the range Track is the right size and shape. Needs prefixed versions to ensure cross-browser consistency. */\n.default__progress-slider__range::-webkit-slider-runnable-track {\n    width: 100%;\n    font-size: 10px;\n    height: 20px;\n    cursor: pointer;\n}\n.default__progress-slider__range::-moz-range-track {\n    width: 100%;\n    height: 20px;\n    cursor: pointer;\n}\n.default__progress-slider__range::-ms-track {\n    width: 100%;\n    height: 20px;\n    cursor: pointer;\n}\n\n/* Position the volume controls */\n.default__wrapper--mute-volume {\n    position: absolute;\n    top: 0;\n    left: 40px;\n    width: 16px;\n    height: 60px;\n    /* overflow: hidden; */\n    z-index: 2;\n}\n.default__mute {\n    display: block;\n    width: 16px;\n    height: 16px;\n    font-size: 0;\n    color: transparent;\n    border: 0;\n    appearance: none;\n    background: var(--black);\n    position: absolute;\n    top: 0;\n    right: 0;\n    cursor: pointer;\n    overflow: hidden;\n}\n\n/* Rectangle part of \"speaker cone\" icon */\n.default__mute:before {\n    display: block;\n    width: 4px;\n    height: 3px;\n    position: absolute;\n    content: \"\";\n    top: 50%;\n    right: 50%;\n    margin-right: -1px;\n    transform: translateY(-50%);\n    background: var(--white);\n}\n\n/* Triangle part of \"speaker cone\" icon */\n.default__mute:after {\n    display: block;\n    width: 4px;\n    max-width: 100%;\n    height: 4px;\n    position: absolute;\n    content: \"\";\n    top: 50%;\n    margin-top: -4px;\n    right: 50%;\n    margin-right: -2px;\n    border-top: 4px solid transparent;\n    border-right: 4px solid var(--white);\n    border-bottom: 4px solid transparent;\n}\n\n/* Change icon when muted */\n.default__mute.muted:before {\n    background: var(--grey);\n}\n.default__mute.muted:after {\n    border-right-color: var(--grey);\n}\n\n.default__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.default__volume-slider__wrapper {\n    display: block;\n    height: 16px;\n    position: absolute;\n    top: 16px;\n    left: 0;\n    z-index: 3;\n    width: 44px;\n    transform: rotate(90deg) translateY(-100%);\n    transform-origin: top left;\n}\n.default__volume-slider__replacement {\n    display: block;\n    height: 16px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    background: var(--greyDark);\n    width: 44px;\n}\n.default__volume-slider__replacement:after {\n    content: \"\";\n    display: block;\n    width: 100%;\n    border-right: 44px solid var(--black);\n    border-bottom: 16px solid transparent;\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    pointer-events: none;\n}\n.default__volume-slider__replacement.focus {\n    outline: 2px solid var(--focus);\n    outline-offset: 1px;\n    border-radius: 2px;\n}\n\n.default__volume-slider__indicator {\n    height: 16px;\n    position: absolute;\n    top: 0;\n    right: 0;\n    background: var(--highlight);\n    width: 100%;\n    transform: rotate(180deg);\n}\n.default__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.default__volume-slider__range {\n    width: 100%;\n    padding: 0;\n    margin: 0;\n    height: 16px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    transform: rotate(180deg);\n}\n\n/* Make sure the range Track is the right size and shape. Needs prefixed versions to ensure cross-browser consistency. */\n.default__volume-slider__range::-webkit-slider-runnable-track {\n    width: 100%;\n    font-size: 10px;\n    height: 15px;\n    cursor: pointer;\n}\n.default__volume-slider__range::-moz-range-track {\n    width: 100%;\n    height: 15px;\n    cursor: pointer;\n}\n.default__volume-slider__range::-ms-track {\n    width: 100%;\n    height: 15px;\n    cursor: pointer;\n}\n"],
  "mappings": "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",
  "names": []
}