/* Find FC theme related CSS styling in this stylesheet */

@import url("CustomButtons.css");

:root {
    --fc-default-border-color: gainsboro;
    --fc-folder-yellow: #FCD462;
}

/* Html Element Overrides */
button {
    color: var(--bs-body-color);
}

input {
    background-color: var(--fc-card);
}

/* FastClose helper classes utilising the themes custom properties */
.fc-menu {
    background-color: var(--fc-menu);
    color: var(--fc-on-menu);
}

.fc-menu > * a {
    color: var(--fc-on-menu);
}

a.fc-primary {
    color: var(--fc-primary);
}

.text-fc-primary {
    background-color: var(--fc-primary);
    color: var(--fc-on-primary);
}

/* Bootstrap specific customisations utilising the themes custom properties */
:root {
    font-size: 16px;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: normal;
    --bs-danger: #ff4500;
    --bs-danger-rgb: 255, 69, 0;
    --bs-btn-disabled-opacity: 0.4;
}

.dropdown-menu {
    background-color: var(--fc-menu);
    color: var(--fc-on-menu);
}

.dropdown-item {
    color: var(--fc-on-menu);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--fc-on-menu);
    color: var(--fc-menu);
}

    /* !important needed here to override default hover styling from BlazorContextMenu */
    .dropdown-item:hover, .dropdown-item:focus {
        color: var(--fc-menu) !important;
        background-color: var(--fc-on-menu) !important;
    }


.form-check-input:checked {
    background-color: var(--fc-primary);
    border-color: var(--fc-primary);
}

.form-check-input[type=checkbox] {
    /* The default margin from bs is 0.25 which makes the checkbox out of alignment with the text beside it. */
    margin-top: 0.1em;
}

.form-check-input[type=radio] {
    /* The default margin from bs is 0.25 which makes the radio out of alignment with the text beside it. */
    margin-top: 0.1em;
}

.btn {
    --bs-btn-border-radius: var(--fc-border-radius);
}

.form-control {
    background-color: var(--fc-card);
}

    .form-control:focus {
        background-color: var(--fc-card);
        border-color: var(--fc-primary);
        box-shadow: none;
    }

    .form-control:disabled {
        background-color: var(--fc-card);
    }

.modal {
    --bs-modal-bg: var(--fc-modal);
    --bs-modal-color: var(--fc-on-modal);
}

.list-group {
    --bs-list-group-bg: var(--fc-modal);
    --bs-list-group-color: var(--fc-on-modal);
}