Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                :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;
}

              
            
!

JS

              
                
              
            
!
999px

Console