%button-shared {
  @include button(normal);
  @include type(button);

  min-height: $medium-size;
  padding: 0 16px;
  border-radius: $corner-radius;
  &:focus { @include button(focus); }
  &:hover, &:checked { @include button(hover); }
  &:active { @include button(active);}
  &:insensitive { @include button(insensitive);}
}
%icon-button-shared {
  @include button(normal);

  min-height: $medium-size;
  min-width: $medium-size;
  padding: 6px;
  border-radius: $corner-radius;
  &:focus { @include button(focus); }
  &:hover, &:checked { @include button(hover); }
  &:active { @include button(active);}
  &:insensitive { @include button(insensitive);}
}
%slider-shared {
   height: 20px;
   color: $primary;
  -slider-height: 2px;
  -slider-background-color: stroke($on-surface); //background of the trough
  -slider-border-color: transparent; //trough border color
  -slider-active-background-color: $primary; //active trough fill
  -slider-active-border-color: transparent; //active trough border
  -slider-border-width: 0;
  -slider-handle-radius: 6px;
}
%separator-shared {
  -gradient-height: 1px;
  -gradient-start: divider($on-surface);
  -gradient-end: divider($on-surface);
  -margin-horizontal: 4px;
  height: 1.5em;
}
%dialog-entry-shared {
  @include entry(normal);

  width: 250px;
  min-height: $medium-size;
  padding: 0 8px;
  border-radius: $corner-radius $corner-radius 0 0;
  color: $on-surface;
  caret-color: $on-surface;
  selection-background-color: $overlay-selected;
  selected-color: $on-surface;
  &:focus {
    @include entry(focus);

    padding: 0 8px;
    border-width: 0;
    color: $on-surface;
  }
}
%desklet-shared {
  color: $on-surface;
  border: none;
  padding: 12px;
  box-shadow: $shadow-z8;
}
%calendar-shared {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  transition-duration: $duration;
  &:active { background-color: stroke($on-surface);}
}
%menu-shared {
  background-color: $surface-z8;
  border-radius: $corner-radius;
  color: $on-surface;
  box-shadow: $shadow-z4;
}
%menu-button-label-shared {
  &:ltr {
    padding-left: 4px;
  }
  &:rtl {
    padding-right: 4px;
  }
}
%dialogs-subject-shared {
  font-weight: bold;
  color: $on-surface;
  padding-top: 10px;
  padding-left: 17px;
  padding-bottom: 6px;
}
%dialogs-subject-rtl-shared {
  padding-left: 0;
  padding-right: 17px;
}
%dialogs-description-shared {
  color: $on-surface;
  padding-left: 17px;
  width: 28em;
}
%check-box-shared {
  width: 24px;
  height: 24px;
  padding: ($medium-size - 24px) / 2;
  border-radius: 100px;
  background-image: url(assets/checkbox-off.svg);
}
%radiobutton-shared {
  width: 20px;
  height: 20px;
  padding: ($medium-size - 20px) / 2;
  border-radius: 100px;
  background-image: url(assets/radiobutton-off.svg);
}
%tile-shared {
  background-color: $scrim-alt;
  border: 2px solid divider($on-surface);
}
%tile-shared-snap {
  background-color: $scrim-alt;
  border: 2px solid $primary;
}
%osd-panel-shared {
  color: $on-surface;
  background-color: $surface-z8;
  border: none;
  border-radius: $corner-radius;
  padding: 12px;
  box-shadow: $shadow-z8;
}
%osd-info-workspace-shared {
  @include type(headline6);
  @extend %osd-panel-shared;

  text-align: center;
  padding: 8px 10px;
}