Screen {
    layers: base overlay;
}

BingoBoard {
    layout: grid;
    grid-size: 5 5;
    height: 100%;
}

BingoField {
    content-align: center middle;
    text-align: center;
    height: 100%;
    width: 100%;
    background: $panel;
    border: thick $background; 
}

BingoField.field_selected {
    background: $success;
}

BingoField.field_highlighted {
    color: $secondary;
}

BingoDisplay {
    layout: vertical;
    height: 100%;
}

.bottom_line {
    height: auto;
    dock: bottom;
}

.seed_input {
  width: 70%;
  border-title-align: left;
  background: $background;
}
.roll_btn {
  width: 30%;
}

Input.-valid {
    border: tall $success 60%;
}
Input.-valid:focus {
    border: tall $success;
}

Sidebar {
    width: 40;
    background: $panel;
    transition: offset 500ms in_out_cubic;
    layer: overlay;
}

Sidebar:focus-within {
    offset: 0 0 !important;
}

Sidebar.-hidden {
    offset-x: -100%;
}

Static.title {
    background: $boost;
    color: $secondary;
    padding: 2 4;
    border-right: vkey $background;
    dock: top;
    text-align: center;
    text-style: bold;
}
Static.message {
    background: $boost;
    color: $text;
    height: 1fr;
    border-right: vkey $background;
    text-align: center;
}

Button.btn_sidebar {
  width: 100%;
}