+ z-index: 1;
+
+ &.is-active {
+ span {
+ &:after {
+ transform: rotate(180deg);
+ }
+ }
+ ul {
+ opacity: 1;
+ transform: none;
+ pointer-events: all;
+ }
+ }
+
+ span {
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+
+ &:after {
+ margin-left: 5px;
+ content: $icon-arrow-down;
+ font-family: '#{$icomoon-font-family}' !important;
+ transition: transform $ease-out 450ms;
+ }
+ }
+
+ ul {
+ width: 283px;
+ position: absolute;
+ background-color: #083F4D;
+ transform: translateY(-10px);
+ opacity: 0;
+ box-shadow: 0 0 20px rgba(1, 129, 137, 0.2);
+ transition: all $ease-out 450ms;
+ list-style-position: inside;
+ border-radius: 10px;
+ right: 0;
+ margin: 10px 0 0;
+ padding: 15px;
+ pointer-events: none;
+ li {
+ font-size: 12px;
+ line-height: 140%;
+ letter-spacing: 0.05em;
+ list-style-type: decimal;
+ margin: 5px 0;
+ color: white;
+ }
+ }
+}
+
+.c-player__volume {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-left: 40px;
+
+ .icon {
+ font-size: 21px;
+ color: #007880;
+ margin-right: 8px;
+ cursor: pointer;
+ }
+
+ input[type=range] {
+ width: 100px;
+ -webkit-appearance: none;
+ background: 0 0;
+ border: 0;
+ border-radius: 5px;
+ height: 10px;
+ color: #006066;
+ display: block;
+ margin: 0;
+ padding: 0;
+ transition: box-shadow .3s ease;
+ outline: 0;
+
+ background: white;
+ background-image: linear-gradient(#006066, #006066);
+ background-size: 60% 100%;
+ background-repeat: no-repeat;
+ }
+}
+
+input[type=range]::-webkit-slider-thumb {
+ height: 10px;
+ width: 10px;
+ background: #006066;
+ border-radius: 50%;
+ cursor: pointer;
+}
+
+input[type=range],
+input[type=range]::-webkit-slider-runnable-track,
+input[type=range]::-webkit-slider-thumb {
+ -webkit-appearance: none;