@use "sass:color";
@use "colors";

.osd {
  background: rgba(colors.$bg-translucent-secondary, .6);
  padding: 14px 14px;
  border-radius: 24px;
  min-width: 180px;

  .icon {
    margin-right: 10px;
    -gtk-icon-size: 24px;
  }

  .volume {
    margin-top: -6px;

    .device {
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: 600;
    }

    levelbar trough block {
      border-radius: 3px;
      background: colors.$bg-primary;

      &.filled {
        min-height: 8px;
        background: colors.$bg-secondary;
      }
    }

    .value {
      font-size: 11px;
      font-weight: 400;
      padding: 0 4px;
    }
  }
}