.component-volume-control {
  display: flex;
  line-height: inherit;
  align-items: center;
  position: relative;
  overflow: visible;
  top: 3px;
  input {
    max-width: 5.5em;
    height: 4px;
  }
  &.expandable {
    .popup {
      background-color: #1B1C1D;
      position: absolute;
      left: -4em;
      top: -7em;
      transform: rotate(-90deg);
      display: flex;
      align-items: center;
      height: 2.5em;
      padding: 0 0.5em;
      box-shadow: 1px 1px 3px rgba(125, 125, 125, 0.5);
    }
    input {
      max-width: 8.5em;
      padding: 1em 0em;
    }
    &:not(:hover):not(.expanded) .popup {
      display: none;
    }
  }
}