window#volume {
   all: unset;
   color: $fg0;
   font-size: $font-size;

   .main {
      background: rgba($bg0, $window-opacity);
      border: $window-border-width solid $window-border-color;
      padding: $window-padding;
      border-radius: $window-radius;
      @if $shadow {
         box-shadow: $window-shadow-offset
            $window-shadow-blur
            $window-shadow-spread
            rgba($window-shadow-color, $window-shadow-opacity);
      }
   }
}

.volume {
   .dropdown {
      font-weight: normal;
      outline: none;
      background: rgba($bg1, $window-opacity);
      border-radius: $widget-radius;

      &:hover {
         background: rgba($bg2, $window-opacity);
         transition: background $transition;
      }

      &:focus {
         transition: 0s;
         outline-offset: -$window-outline-width;
         outline: $window-outline-width solid $window-outline-color;
      }
   }

   popover {
      contents {
         background: rgba($bg0, $window-opacity);
         border: $window-border-width solid $window-border-color;
         padding: $window-padding;
         border-radius: $window-radius;
         @if $shadow {
            box-shadow: $window-shadow-offset
               $window-shadow-blur
               $window-shadow-spread
               rgba($window-shadow-color, $window-shadow-opacity);
         }
      }

      button {
         background: transparent;
         color: $fg0;
         border-radius: $widget-radius;
         outline: none;
         font-weight: normal;

         &:focus {
            transition: 0s;
            outline-offset: -$window-outline-width;
            outline: $window-outline-width solid $window-outline-color;
         }

         &:hover {
            background: $bg1;
         }
      }
   }

   .slider-box {
      scale {
         padding: 0;

         trough {
            all: unset;
            background: rgba($bg1, $window-opacity);
            min-height: 18px;
            border-radius: $widget-radius;
         }

         highlight {
            all: unset;
            min-height: 18px;
            border-radius: $widget-radius;
            background: rgba($accent, $window-opacity);
         }

         slider {
            all: unset;
            border-radius: $widget-radius;
            margin: 0;
         }

         &:focus {
            trough {
               transition: 0s;
               outline-offset: -$window-outline-width;
               outline: $window-outline-width solid $window-outline-color;
            }
         }
      }
   }
}
