/* tab-bar.css */

div.tab-bar {
    display: flex;
}

button.tab-bar-tab {
    flex: 1;
    padding: 8px 16px;
    border: 1px solid darkgray;
    background-color: deepskyblue;
    font-weight: normal;
    cursor: pointer;
}

button.tab-bar-tab:first-child {
    border-top-left-radius: 4px;
}

button.tab-bar-tab:last-child {
    border-top-right-radius: 4px;
}

button.tab-bar-tab:not(:first-child) {
    border-left: none;
}

button.tab-bar-tab:hover {
    background-color: gold;
}

button.tab-bar-tab-selected {
    background-color: white;
    border-bottom-color: white;
    font-weight: bold;
}

button.tab-bar-tab-selected:hover {
    background-color: white;
    border-bottom-color: white;
    cursor: default;
}

div.tab-bar-panel {
    border: 1px solid darkgray;
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 16px;
    background-color: white;
    display: grid;
}

div.tab-bar-content {
    grid-column: 1;
    grid-row: 1;
}