Screen {
  scrollbar-size: 0 0;
}

Typer {
  border-title-color: $panel-lighten-3;
}

TyperSimulator {
  margin: 1 0 0 0;
}

Switch {
  padding: 0;
  border: none;
  background: $background;
}

StatItem {
  width: 20;
  height: 4;
  border: round $panel;
}

LastTypingSession {
  align-horizontal: center;
  border: hkey $panel-lighten-3;
  border-title-align: center;
}

TypingSessions {
  height: auto;
  layout: horizontal;
  align-horizontal: center;
  border: hkey $panel-lighten-3;
  border-title-align: center;
}

.vertical {
  layout: vertical;
}

.horizontal {
  layout: horizontal;
}

.height-auto {
  height: auto;
}

.width-auto {
  width: auto;
}

.hidden {
  display: none;
}

.setting-row {
  width: 60;
  padding: 0 1;
  &:focus-within {
    tint: $secondary;
  }
}

.setting-label {
  padding: 0 0 0 1;
  width: 100%;
}

.setting-select {
  padding: 0 1 0 0;
  dock: right;
  width: 30;
}

.setting-input {
  padding: 0 1 0 0;
  dock: right;
  width: 10;
}

.setting-switch {
  padding: 0 1 0 0;
  dock: right;
  width: 6;
}

.setting-container {
  align-horizontal: center;
  padding: 1 0 0 0;
}

SelectionList {
  padding: 1 0 0 0;
  border: hkey $panel-lighten-3;
  width: 40;
}

LinearSlider {
  padding: 0 1 0 0;
  dock: right;
  width: 20;
}

Thumb {
  width: 19;
  &> .bar--bar {
      color: $panel-lighten-3;
      background: $surface;
  }
}

.slider-value-label {
  dock: right;
  width: 24;
}

.settings-group-container {
  width: auto;
  height: 1fr;
  border: hkey $panel-lighten-3;
  border-title-align: center;
  margin: 1 0;
}


SettingsContainer {
  align-horizontal: center;
  width: auto;
  height: 1fr;
}

#sidebar {
  dock: left;
  width: 20;
  height: 100%;
  background: $panel-lighten-2;
  padding: 5 0;

  & > ListItem {
    color: $foreground;
    height: auto;
    overflow: hidden hidden;
    align-horizontal: center;
    width: 100%;
    padding: 1;

    &.-hovered {
      background: $panel-lighten-3;
      color: $block-cursor-blurred-foreground;
      text-style: $block-cursor-blurred-text-style;
    }

    &.-highlight {
      background: $background;
      color: $foreground;
      text-style: $block-cursor-text-style;
    }
  }

  &:focus {
    background-tint: $panel-lighten-3;
    & > ListItem.-highlight {
      color: $foreground;
      background: $background;
      text-style: $block-cursor-blurred-text-style;
    }
  }
}
