Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="apple-music">
        <aside class="c-nav"></aside>
        <main>
            <div class="c-playback">
                <div class="c-playback__controls__wrapper">
                    <div class="c-playback__controls">
                        <button class="c-playback__random">
                                <svg width="100%" height="100%" viewBox="0 0 30 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"><path d="M19.542,7l0,-1.032c0,-0.259 0.175,-0.468 0.392,-0.468c0.066,0 0.131,0.02 0.189,0.058l2.715,1.782c0.19,0.125 0.259,0.409 0.155,0.635c-0.036,0.078 -0.089,0.142 -0.155,0.185l-2.715,1.782c-0.19,0.125 -0.428,0.042 -0.533,-0.184c-0.032,-0.07 -0.048,-0.147 -0.048,-0.226l0,-1.032l-0.377,0c-0.524,0 -1.031,0.15 -1.466,0.423c-0.235,0.148 -0.45,0.333 -0.633,0.551l-1.292,1.526l1.292,1.526c0.183,0.218 0.398,0.403 0.633,0.551c0.435,0.273 0.942,0.423 1.466,0.423l0.377,0l0,-1.032c0,-0.259 0.175,-0.468 0.392,-0.468c0.066,0 0.131,0.02 0.189,0.058l2.715,1.782c0.19,0.125 0.259,0.409 0.155,0.635c-0.036,0.078 -0.089,0.142 -0.155,0.185l-2.715,1.782c-0.19,0.125 -0.428,0.042 -0.533,-0.184c-0.032,-0.07 -0.048,-0.147 -0.048,-0.226l0,-1.032l-0.377,0c-0.673,0 -1.327,-0.159 -1.913,-0.455c-0.504,-0.254 -0.958,-0.609 -1.332,-1.05l-1.128,-1.334l-1.129,1.334c-0.361,0.426 -0.797,0.772 -1.281,1.024c-0.6,0.312 -1.272,0.481 -1.964,0.481l-1.126,0c-0.415,0 -0.75,-0.336 -0.75,-0.75c0,-0.414 0.335,-0.75 0.75,-0.75l1.126,0c0.479,0 0.944,-0.125 1.352,-0.355c0.28,-0.158 0.534,-0.367 0.748,-0.619l1.291,-1.526l-1.291,-1.526c-0.214,-0.252 -0.468,-0.461 -0.748,-0.619c-0.408,-0.23 -0.873,-0.355 -1.352,-0.355l-1.126,0c-0.415,0 -0.75,-0.336 -0.75,-0.75c0,-0.414 0.335,-0.75 0.75,-0.75l1.126,0c0.692,0 1.364,0.169 1.964,0.481c0.484,0.252 0.92,0.598 1.281,1.024l1.129,1.334l1.128,-1.334c0.374,-0.441 0.828,-0.796 1.332,-1.05c0.586,-0.296 1.24,-0.455 1.913,-0.455l0.377,0Z" style="fill-rule:nonzero"></path></svg>
                        </button>
                        <div class="c-playback__controls__group">
                                <button class="c-playback__controls__button">
                                        <svg width="100%" height="100%" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"><path d="M26.97,23c0.536,0 1.03,-0.38 1.03,-1.124l0,-9.752c0,-0.744 -0.494,-1.124 -1.03,-1.124c-0.294,0 -0.57,0.097 -0.889,0.283l-8.26,4.617c-0.436,0.243 -0.729,0.494 -0.804,0.874l0,-4.65c0,-0.744 -0.503,-1.124 -1.031,-1.124c-0.301,0 -0.578,0.097 -0.896,0.283l-8.261,4.617c-0.511,0.283 -0.829,0.574 -0.829,1.1c0,0.518 0.318,0.817 0.829,1.1l8.261,4.617c0.318,0.186 0.595,0.283 0.896,0.283c0.528,0 1.031,-0.38 1.031,-1.124l0,-4.658c0.075,0.388 0.368,0.639 0.804,0.882l8.26,4.617c0.319,0.186 0.595,0.283 0.889,0.283Z" style="fill-rule:nonzero"></path></svg>
                                </button>
                                <button class="c-playback__controls__button">
                                        <svg width="100%" height="100%" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"><path d="M28.228,18.327l-16.023,8.983c-0.99,0.555 -2.205,-0.17 -2.205,-1.318l0,-17.984c0,-1.146 1.215,-1.873 2.205,-1.317l16.023,8.982c1.029,0.577 1.029,2.077 0,2.654Z" style="fill-rule:nonzero"></path></svg>
                                </button>
                                <button class="c-playback__controls__button">
                                        <svg width="100%" height="100%" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"><path d="M8.307,23c-0.536,0 -1.031,-0.38 -1.031,-1.124l0,-9.752c0,-0.744 0.495,-1.124 1.031,-1.124c0.293,0 0.569,0.097 0.888,0.283l8.26,4.617c0.436,0.243 0.729,0.494 0.805,0.874l0,-4.65c0,-0.744 0.502,-1.124 1.03,-1.124c0.302,0 0.578,0.097 0.896,0.283l8.261,4.617c0.511,0.283 0.829,0.574 0.829,1.1c0,0.518 -0.318,0.817 -0.829,1.1l-8.261,4.617c-0.318,0.186 -0.594,0.283 -0.896,0.283c-0.528,0 -1.03,-0.38 -1.03,-1.124l0,-4.658c-0.076,0.388 -0.369,0.639 -0.805,0.882l-8.26,4.617c-0.319,0.186 -0.595,0.283 -0.888,0.283Z" style="fill-rule:nonzero"></path></svg>
                                </button>
                        </div>
                        <button class="c-playback__repeat">
                                <svg width="100%" height="100%" viewBox="0 0 30 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421"><path d="M17,7l0,-1.032c0,-0.259 0.176,-0.468 0.392,-0.468c0.066,0 0.131,0.02 0.189,0.058l2.716,1.782c0.19,0.125 0.259,0.409 0.154,0.635c-0.035,0.078 -0.089,0.142 -0.154,0.185l-2.716,1.782c-0.19,0.125 -0.428,0.042 -0.532,-0.184c-0.032,-0.07 -0.049,-0.147 -0.049,-0.226l0,-1.032l-5.092,0c-0.61,0 -1.055,0.1 -1.41,0.29c-0.309,0.165 -0.543,0.399 -0.708,0.708c-0.159,0.297 -0.255,0.658 -0.282,1.125c-0.004,0.06 -0.011,0.154 -0.024,0.281c-0.071,0.34 -0.372,0.596 -0.734,0.596c-0.414,0 -0.75,-0.336 -0.75,-0.75l0,-0.25c0,-0.866 0.162,-1.139 0.467,-1.709c0.306,-0.571 0.753,-1.018 1.324,-1.324c0.57,-0.305 1.251,-0.467 2.117,-0.467l5.092,0Zm-4,8l0,1.006c0,0.083 -0.017,0.165 -0.049,0.238c-0.104,0.239 -0.342,0.326 -0.532,0.195l-2.716,-1.881c-0.065,-0.045 -0.119,-0.113 -0.154,-0.195c-0.105,-0.239 -0.036,-0.539 0.154,-0.671l2.716,-1.881c0.058,-0.04 0.123,-0.061 0.189,-0.061c0.216,0 0.392,0.221 0.392,0.494l0,1.256l5.092,0c0.61,0 1.055,-0.1 1.41,-0.29c0.309,-0.165 0.543,-0.399 0.708,-0.708c0.159,-0.297 0.255,-0.658 0.282,-1.125c0.004,-0.06 0.011,-0.154 0.024,-0.281c0.071,-0.34 0.372,-0.596 0.734,-0.596c0.414,0 0.75,0.336 0.75,0.75l0,0.25c0,0.866 -0.162,1.139 -0.467,1.709c-0.306,0.571 -0.753,1.018 -1.324,1.324c-0.57,0.305 -1.251,0.467 -2.117,0.467l-5.092,0Z" style="fill-rule:nonzero"></path></svg>
                        </button>
                    </div>
                </div>
                <div class="c-playback__lcd">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" version="1.1" viewBox="0 0 20 24" role="presentation"><path fill-rule="nonzero" stroke="none" stroke-width="1" d="M14.5498331,5.79055576 L14.8667346,5.79824073 C15.6519271,5.85753895 17.9167852,6.09354452 19.3663083,8.18658259 C19.2454992,8.2761902 16.6786385,9.72115188 16.7091378,12.7589876 C16.7390911,16.3870553 19.9696682,17.5970079 20,17.6265086 C19.9696682,17.7155832 19.487499,19.3381578 18.3096405,21.0185738 C17.2829229,22.4941235 16.2256873,23.9394547 14.5345925,23.9689736 C12.9038728,23.9984743 12.3599697,23.0246181 10.4887983,23.0246181 C8.61624942,23.0246181 8.01243658,23.9394547 6.47193668,23.9984743 C4.84148068,24.056773 3.60409403,22.4336653 2.57735781,20.9595512 C0.463094554,17.9799264 -1.13731196,12.5531248 1.03685791,8.89465382 C2.09390733,7.06587112 4.02671959,5.91602544 6.10974825,5.88615523 C7.71015477,5.85753895 9.18984525,6.91939744 10.1566562,6.91939744 C11.1229398,6.91939744 12.8433271,5.68057112 14.8667346,5.79824073 Z M14.882569,-1.50990331e-14 C15.034318,1.42063421 14.4589476,2.81085604 13.6110595,3.84623659 C12.7325883,4.85257077 11.3405768,5.6504798 9.94727779,5.53248307 C9.76560653,4.17140151 10.4624841,2.72297789 11.2498451,1.83563692 C12.1267465,0.799444643 13.6413789,0.0602553239 14.882569,-1.50990331e-14 Z"></path></svg>
                </div>
                <div class="c-playback__user">
                    <div class="c-playback__user__vol">
                        <div class="c-input-slider">    
                            <svg xmlns="http://www.w3.org/2000/svg" width="45" height="33" version="1.1" viewBox="0 0 45 33">
                                <path fill-rule="nonzero" stroke="none" stroke-width="1" d="M38.4179688,30.3604142 C40.3125,26.590883 41.796875,21.6885392 41.796875,16.3760392 C41.796875,11.0635392 40.3125,6.16119547 38.4179688,2.39166422 C37.9882812,1.53228922 38.1640625,0.731507974 38.90625,0.243226724 C39.6875,-0.264585776 40.625,0.0479142244 41.1328125,0.946351724 C43.4765625,5.12603922 44.9023438,10.497133 44.9023438,16.3760392 C44.9023438,22.2549455 43.4765625,27.6260392 41.1328125,31.8057267 C40.625,32.7041642 39.6875,33.0166642 38.90625,32.5088517 C38.1640625,32.0205705 37.9882812,31.2197892 38.4179688,30.3604142 Z M20.9375,27.5674455 C20.9375,29.2080705 19.8242188,30.3604142 18.2421875,30.3604142 C17.5390625,30.3604142 16.9140625,30.0869767 16.2109375,29.5791642 L8.671875,24.0322892 L3.59375,24.0322892 C1.3671875,24.0322892 0,22.8213517 0,20.4385392 L0,12.4307267 C0,10.0479142 1.3671875,8.83697672 3.59375,8.83697672 L8.671875,8.83697672 L16.2109375,3.29010172 C16.9140625,2.78228922 17.5390625,2.50885172 18.2421875,2.50885172 C19.8242188,2.50885172 20.9375,3.66119547 20.9375,5.30182047 L20.9375,27.5674455 Z M31.484375,26.356508 C32.8125,23.5049455 33.7890625,20.2236955 33.7890625,16.3760392 C33.7890625,12.528383 32.8125,9.24713297 31.484375,6.39557047 C31.09375,5.55572672 31.2695312,4.77447672 31.9921875,4.26666422 C32.734375,3.75885172 33.75,4.07135172 34.21875,4.96978922 C35.8789062,8.17291422 36.875,11.981508 36.875,16.3760392 C36.875,20.7705705 35.8789062,24.5791642 34.21875,27.7822892 C33.75,28.6807267 32.734375,28.9932267 31.9921875,28.4854142 C31.2695312,27.9776017 31.09375,27.1963517 31.484375,26.356508 Z M24.84375,22.684633 C25.703125,20.8486955 26.25,18.7588517 26.25,16.3760392 C26.25,13.9932267 25.703125,11.903383 24.84375,10.0674455 C24.4726563,9.26666422 24.609375,8.44635172 25.3515625,7.93853922 C26.1132813,7.43072672 27.1289063,7.72369547 27.578125,8.64166422 C28.6328125,10.8486955 29.296875,13.465883 29.296875,16.3760392 C29.296875,19.2861955 28.6328125,21.903383 27.578125,24.1104142 C27.1289063,25.028383 26.1132813,25.3213517 25.3515625,24.8135392 C24.609375,24.3057267 24.4726563,23.4854142 24.84375,22.684633 Z"></path>
                            </svg>
                            <input type="range" name="" id="" value="100">
                        </div>
                    </div>
                    <div class="c-playback__user__toggle">
                        <button class="c-playback__toggle">
                                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" version="1.1" viewBox="0 0 18 18" xml:space="preserve">
                                    <path d="M2.504,4.063l0.519,0c0.431,0 0.78,0.349 0.78,0.779c0,0.431 -0.349,0.78 -0.78,0.78l-0.519,0c-0.431,0 -0.78,-0.349 -0.78,-0.78c0,-0.43 0.349,-0.779 0.78,-0.779Zm3.118,0l9.874,0c0.431,0 0.78,0.349 0.78,0.779c0,0.431 -0.349,0.78 -0.78,0.78l-9.874,0c-0.43,0 -0.78,-0.349 -0.78,-0.78c0,-0.43 0.35,-0.779 0.78,-0.779Zm-3.118,4.157l0.519,0c0.431,0 0.78,0.35 0.78,0.78c0,0.43 -0.349,0.78 -0.78,0.78l-0.519,0c-0.431,0 -0.78,-0.35 -0.78,-0.78c0,-0.43 0.349,-0.78 0.78,-0.78Zm3.118,0l9.874,0c0.431,0 0.78,0.35 0.78,0.78c0,0.43 -0.349,0.78 -0.78,0.78l-9.874,0c-0.43,0 -0.78,-0.35 -0.78,-0.78c0,-0.43 0.35,-0.78 0.78,-0.78Zm-3.118,4.158l0.519,0c0.431,0 0.78,0.349 0.78,0.78c0,0.43 -0.349,0.779 -0.78,0.779l-0.519,0c-0.431,0 -0.78,-0.349 -0.78,-0.779c0,-0.431 0.349,-0.78 0.78,-0.78Zm3.118,0l9.874,0c0.431,0 0.78,0.349 0.78,0.78c0,0.43 -0.349,0.779 -0.78,0.779l-9.874,0c-0.43,0 -0.78,-0.349 -0.78,-0.779c0,-0.431 0.35,-0.78 0.78,-0.78Z"></path>
                                </svg>
                        </button>
                    </div>
                    <div class="c-playback__user__signin">
                        <button class="c-button">
                            <svg height="11" viewBox="0 0 10 11" width="10" xmlns="http://www.w3.org/2000/svg" fill="#000" fill-rule="nonzero" role="presentation">
                                <g><path d="M5 5.29495614c-1.29585799 0-2.38466244-1.17598684-2.38466244-2.67763158-.0058701-1.46546052 1.10063877-2.61732456 2.38466244-2.61732456 1.28994083 0 2.39053254 1.12774123 2.39053254 2.61129386 0 1.50767544-1.09467455 2.68366228-2.39053254 2.68366228zM1.31360947 11c-.97633136 0-1.31360947-.3015351-1.31360947-.8563596 0-1.5498904 1.92899408-3.68475882 5-3.68475882 3.06508876 0 5 2.13486842 5 3.68475882 0 .5548245-.33727811.8563596-1.31360947.8563596z"></path></g>
                            </svg>
                            Sign In
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </div>
            
          
!
            
              :root {
  --color-brand-primary: #06aed5;
}

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
}

* {
  box-sizing: border-box;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: #000;
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  margin: 7.5px 0;
  width: 100%;
}
[type="range"]::-moz-focus-outer {
  border: 0;
}
[type="range"]:focus {
  outline: 0;
}
[type="range"]:focus::-webkit-slider-runnable-track {
  background: #8c8c8c;
}
[type="range"]:focus::-ms-fill-lower {
  background: #7f7f7f;
}
[type="range"]:focus::-ms-fill-upper {
  background: #8c8c8c;
}
[type="range"]::-webkit-slider-runnable-track {
  cursor: default;
  height: 6px;
  transition: all 0.2s ease;
  width: 100%;
  background: #7f7f7f;
  border-radius: 5px;
  border: 0;
}
[type="range"]::-webkit-slider-thumb {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #7f7f7f;
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  cursor: default;
  height: 15px;
  width: 15px;
  -webkit-appearance: none;
  margin-top: -5.5px;
}
[type="range"]::-moz-range-track {
  cursor: default;
  height: 6px;
  transition: all 0.2s ease;
  width: 100%;
  background: #7f7f7f;
  border: 0;
  border-radius: 5px;
  height: 3px;
}
[type="range"]::-moz-range-thumb {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #7f7f7f;
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  cursor: default;
  height: 15px;
  width: 15px;
}
[type="range"]::-ms-track {
  cursor: default;
  height: 6px;
  transition: all 0.2s ease;
  width: 100%;
  background: transparent;
  color: transparent;
}
[type="range"]::-ms-fill-lower {
  background: #727272;
  border: 1px solid #a2a2a2;
  border-radius: 10px;
}
[type="range"]::-ms-fill-upper {
  background: #7f7f7f;
  border: 1px solid #a2a2a2;
  border-radius: 10px;
}
[type="range"]::-ms-thumb {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #7f7f7f;
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  cursor: default;
  height: 15px;
  width: 15px;
  margin-top: 1.5px;
}
[type="range"]:disabled::-webkit-slider-thumb,
[type="range"]:disabled::-moz-range-thumb,
[type="range"]:disabled::-ms-thumb,
[type="range"]:disabled::-webkit-slider-runnable-track,
[type="range"]:disabled::-ms-fill-lower,
[type="range"]:disabled::-ms-fill-upper {
  cursor: not-allowed;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

@media (min-width: 700px) {
  .apple-music {
    display: grid;
    grid-template-columns: 259px 1fr;
  }
}

.c-nav {
  height: 100vh;
  background: #f9f9f9;
  border-right: 1px solid #e0e0e0;
}
@media (max-width: 699px) {
  .c-nav {
    display: none;
  }
}

/***** Playback *****/
.c-playback {
  display: grid;
  grid-template-columns: 0.7fr 1.1fr 1fr;
  grid-gap: 6px;
  align-items: center;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px 16px;
  border-bottom: 1px solid #e8e8e8;
}
@media (min-width: 1135px) {
  .c-playback {
    grid-gap: 16px;
    grid-template-columns: 1fr 1.5fr 1fr;
  }
}
@media (max-width: 970px) {
  .c-playback {
    position: relative;
    display: block;
  }
  .c-playback .c-playback__controls,
  .c-playback .c-playback__toggle,
  .c-playback .c-input-slider {
    display: none;
  }
  .c-playback .c-playback__user__signin {
    position: absolute;
    right: 24px;
    top: 12px;
  }
}

.c-playback__controls__wrapper {
  text-align: center;
}

.c-playback__controls {
  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
  justify-items: center;
  align-items: center;
}
.c-playback__controls button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
}
.c-playback__controls svg {
  fill: #878787;
}

.c-playback__controls__button {
  width: 32px;
  height: 32px;
}
.c-playback__controls__button svg {
  width: inherit;
  height: inherit;
}

.c-playback__random,
.c-playback__repeat {
  width: 30px;
  height: 22px;
}
.c-playback__random svg,
.c-playback__repeat svg {
  width: inherit;
  height: inherit;
  opacity: 0.5;
}

.c-playback__controls__group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.c-playback__lcd {
  position: relative;
  height: 44px;
  border: 0.5px solid #dedede;
  border-radius: 3px;
  overflow: hidden;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-playback__lcd:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  background: url("https://beta.music.apple.com/assets/product/MissingArtworkMusic-48f3c55581d88b6ddda5fe0d1bb9e18a.png")
    center/100% no-repeat;
}
.c-playback__lcd svg {
  position: relative;
  top: -1px;
  fill: #8a8a8e;
}

.c-playback__user {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.c-playback__user__vol {
  margin-left: auto;
  margin-right: auto;
}

.c-playback__user__toggle {
  margin-right: 20px;
}

.c-input-slider {
  display: flex;
  align-items: center;
}
.c-input-slider input {
  width: 70px !important;
}
.c-input-slider svg {
  width: 16px;
  height: 16px;
  fill: #999;
  margin-right: 4px;
}

.c-playback__toggle {
  appearance: none;
  border: 0;
  background: transparent;
}
.c-playback__toggle svg {
  width: 24px;
  height: 18px;
  fill: #c4c4c6;
}

.c-button {
  appearance: none;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  background-color: #0076ff;
  padding: 6px 12px;
}
.c-button svg {
  fill: #fff;
  width: 10px;
  height: 11px;
  margin-right: 4px;
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console