@mixin osd() {
  .background.osd {
    color: $osd_fg;
    background-color: $osd_bg;
  }

  .osd frame {
    background-clip: border-box;
    background-origin: border-box;
  }

  .osd button, button.osd {
    padding: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: gtkshade($osd_bg, 0.8);
    border-radius: $button_radius;
    background-color: gtkshade($osd_bg, 1.08);
    color: $osd_fg;

    &:hover {
      border-color: gtkshade($osd_bg, 0.7);
      background-color: gtkshade($osd_bg, 1.10);
      color: $osd_fg;
    }

    &:active, &:checked {
      border-color: gtkshade($osd_bg, 0.8);
      background-color: gtkshade($osd_bg, 0.95);
      color: $osd_fg;
    }

    &:disabled {
      border-color: gtkshade($osd_bg, 0.85);
      background-color: gtkshade($osd_bg, 0.9);
      color: gtkalpha($osd_fg, 0.8);
    }

    &:checked:disabled {
      background-color: gtkshade($osd_bg, 0.8);
    }
    
    &:backdrop {
      border-color: gtkshade($osd_bg, 0.8);
      background-color: gtkshade($osd_bg, 1.08);    
    }
  }

  .osd toolbar, toolbar.osd {
    -GtkToolbar-button-relief: normal;

    padding: 4px;
    border-width: 1px;
    border-style: solid;
    border-radius: 0;
    border-color: gtkshade($osd_bg, 0.8);
    background-color: $osd_bg;
    color: $osd_fg;

    button {
      padding: 2px 4px;
      border-width: 1px;
      border-style: solid;
      border-color: gtkshade($osd_bg, 0.8);
      border-radius: $button_radius;
      background-color: gtkshade($osd_bg, 1.08);
      color: $osd_fg;

      &:hover {
        border-color: gtkshade($osd_bg, 0.7);
        background-color: gtkshade($osd_bg, 1.10);
        color: $osd_fg;
      }

      &:active, &:checked {
        border-color: gtkshade($osd_bg, 0.8);
        background-color: gtkshade($osd_bg, 0.95);
        color: $osd_fg;
      }

      &:disabled {
        border-color: gtkshade($osd_bg, 0.85);
        background-color: gtkshade($osd_bg, 0.9);
        color: gtkalpha($osd_fg, 0.8);
      }

      &:checked:disabled {
        border-color: gtkshade($osd_bg, 0.75);
        background-color: gtkshade($osd_bg, 0.80);
      }
    }

    separator {
      color: gtkshade($osd_bg, 0.9);
    }
  }

  .osd scale, scale.osd {
    slider {
      background-color: $selected_bg_color;

      &:hover {
        background-color: $selected_bg_color;
      }

      &:disabled {
        background-color: gtkmix($osd_bg, $osd_fg, 0.15);
      }
    }
    
    trough {
      border-color: gtkmix($osd_bg, $osd_fg, 0.15);

      &:disabled {
        border-color: gtkshade($osd_bg, 0.85);
        background-color: transparent;
      }
    }

    highlight {
      border-color: $selected_bg_color;
      background-color: $selected_bg_color;
    }
  }

  .osd progress, progress.osd {
    background-color: $osd_fg;
  }

  .osd progressbar, progressbar.osd {
    padding: 0;

    trough {
      padding: 0;
      border-style: none;
      border-radius: 0;
      background-color: transparent;
    }

    progress {
      border-style: none;
      border-radius: 0;
      background-color: $selected_bg_color;
    }
  }

  .osd scrollbar, scrollbar.osd {
    trough {
      background-color: transparent;
    }

    slider {
      border-width: 0px;
      border-radius: 6px;
      background-color: gtkmix($osd_base, $osd_fg, 0.21);

      &:hover {
        border-color: gtkmix($osd_base, $osd_fg, 0.31);
        background-color: gtkmix($osd_base, $osd_fg, 0.31);
      }

      &:active {
        border-color: gtkmix($osd_base, $osd_fg, 0.31);
        background-color: gtkmix($osd_base, $osd_fg, 0.1);
      }
    }
  }

  .osd view, view.osd, .osd.view {
    background-color: $osd_base;

    &:selected, &:selected:focus {
      background-color: transparent;
      border-style: solid;
      border-radius: 0;
      border-width: 3px;
      border-color: $osd_fg;
      outline-color: transparent;
    }
  }
}
