@use "../../theme";
@use "../../theme-color";
@use "../../gnome-shell/sass/drawing";
@use "../../gnome-shell/sass/typography";

%button-shared {
  @include drawing.button(normal);
  @include typography.button;

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

  min-height: theme.$medium-size;
  min-width: theme.$medium-size;
  padding: 6px;
  border-radius: theme.$corner-radius;
  &:focus { @include drawing.button(focus); }
  &:hover, &:checked { @include drawing.button(hover); }
  &:active { @include drawing.button(active);}
  &:insensitive { @include drawing.button(insensitive);}
}
%slider-shared {
   height: 20px;
   color: theme-color.$primary;
  -slider-height: 2px;
  -slider-background-color: theme-color.stroke(theme-color.$on-surface); //background of the trough
  -slider-border-color: transparent; //trough border color
  -slider-active-background-color: theme-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: theme-color.divider(theme-color.$on-surface);
  -gradient-end: theme-color.divider(theme-color.$on-surface);
  -margin-horizontal: 4px;
  height: 1.5em;
}
%dialog-entry-shared {
  @include drawing.entry(normal);

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

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

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