body,
html {
    height: 100%;
    font-size: 13px;
}

body {
    background: var(--background-color);
}

.window {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background-color);
    color: var(--text-color);

    .bottom-buttons-bar {
        @extend .p-3;
        border-top: var(--border-color) 1px solid;
        display: flex;
        align-items: center;

        button:not(:last-of-type) {
            margin-right: 0.375rem;
        }
    }
}

.tabs {
    user-select: none;

    .nav-item {
        color: var(--tab-inactive-text-color);
        background: var(--tab-background);
        border-bottom: 2px solid transparent;
        margin-right: 1px;

        &.active {
            color: var(--tab-active-text-color);
            font-weight: 600;
            background: var(--tab-active-background);
            border-bottom: var(activeColor) 2px solid;

            .nav-link {
                color: var(--tab-active-text-color);
            }
        }

        &:hover {
            background: var(--tab-active-background);
        }

        .nav-link {
            color: var(--tab-inactive-text-color);
            border: none;
            padding-top: $tab-vertical-padding;
            padding-bottom: $tab-vertical-padding;

            &:hover {
                border: none;
                cursor: pointer;
            }
        }
    }

    &.tabs-sm {
        .nav-link {
            padding-top: $tab-sm-vertical-padding;
            padding-bottom: $tab-sm-vertical-padding;
        }
    }
}

.tab-content {
    @extend %flex-grow-height-restricted;
    /* stylelint-disable scss/at-extend-no-missing-placeholder -- bootstrap doesn't provide placeholders */
    @extend .d-flex;
    @extend .flex-column;
    /* stylelint-enable scss/at-extend-no-missing-placeholder */
}

.dialog {
    background: var(--dialog-background);
    color: var(--text-color);

    min-width: 100px;
    min-height: 50px;

    .bottom-bar {
        margin-top: 1rem;
        display: flex;
        align-items: center;

        .buttons {
            text-align: right;
            margin-left: auto;
        }
    }
}

.dialog-overlay {
    background-color: rgb(0 0 0 / 50%);
}

.theme-netpad-dark {
    .btn-themed {
        @extend .btn-dark;
    }
}

.theme-netpad-light {
    .btn-themed {
        @extend .btn-light;
    }
}
