:root {
    --bs-body-font-family: "Geologica", sans-serif;
    --bs-body-font-size: 14px;
    --bs-primary: #F9C33E;
    --bs-primary-rgb: 249, 195, 62;
    --bs-primary-active: #D6A533;
    --bs-primary-active-rgb: 214, 165, 51;
    --bs-secondary: #DBDBDB;
    --bs-secondary-rgb: 219, 219, 219;
    --bs-secondary-active: #BCBCBC;
    --bs-secondary-active-rgb: 188, 188, 188;
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--bs-primary-active);
    --bs-link-hover-color-rgb: var(--bs-primary-active-rgb);
    --bs-body-color: var(--bs-secondary);
    --bs-body-color-rgb: var(--bs-secondary-rgb);
    --bs-body-bg: #181818;
    --bs-body-bg-rgb: 24, 24, 24;
    --bs-secondary-bg: #232323;
    --bs-secondary-bg-rgb: 35, 35, 35;
    --bs-border-color: #4B4B4B;
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .625rem;
    --bs-border-radius-xl: .25rem;
    --bs-border-radius-xxl: .5rem;
    --bs-accordion-btn-focus-box-shadow: 0;
}

.turbo-progress-bar {
    background: var(--bs-primary);
}

.btn {
    --bs-btn-focus-box-shadow: var(--bs-btn-box-shadow);

    &.btn-primary {
        --bs-btn-color: var(--bs-body-bg);
        --bs-btn-bg: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-color: var(--bs-body-bg);
        --bs-btn-hover-bg: var(--bs-primary-active);
        --bs-btn-hover-border-color: var(--bs-primary-active);
        --bs-btn-active-color: var(--bs-body-bg);
        --bs-btn-active-bg: var(--bs-primary-active);
        --bs-btn-active-border-color: var(--bs-primary-active);
        --bs-btn-disabled-color: var(--bs-body-bg);
        --bs-btn-disabled-bg: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    }

    &.btn-outline-primary {
        --bs-btn-color: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-color: var(--bs-body-bg);
        --bs-btn-hover-bg: var(--bs-primary);
        --bs-btn-hover-border-color: var(--bs-primary);
        --bs-btn-active-color: var(--bs-body-bg);
        --bs-btn-active-bg: var(--bs-primary-active);
        --bs-btn-active-border-color: var(--bs-primary-active);
        --bs-btn-disabled-color: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    }

    &.btn-secondary {
        --bs-btn-color: var(--bs-body-bg);
        --bs-btn-bg: var(--bs-secondary);
        --bs-btn-border-color: var(--bs-secondary);
        --bs-btn-hover-color: var(--bs-body-bg);
        --bs-btn-hover-bg: var(--bs-secondary-active);
        --bs-btn-hover-border-color: var(--bs-secondary-active);
        --bs-btn-active-color: var(--bs-body-bg);
        --bs-btn-active-bg: var(--bs-secondary-active);
        --bs-btn-active-border-color: var(--bs-secondary-active);
        --bs-btn-disabled-color: var(--bs-body-bg);
        --bs-btn-disabled-bg: var(--bs-secondary);
        --bs-btn-disabled-border-color: var(--bs-secondary);
        --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    }

    &.btn-outline-secondary {
        --bs-btn-color: var(--bs-secondary);
        --bs-btn-border-color: var(--bs-secondary);
        --bs-btn-hover-color: var(--bs-body-bg);
        --bs-btn-hover-bg: var(--bs-secondary);
        --bs-btn-hover-border-color: var(--bs-secondary);
        --bs-btn-active-color: var(--bs-body-bg);
        --bs-btn-active-bg: var(--bs-secondary-active);
        --bs-btn-active-border-color: var(--bs-secondary-active);
        --bs-btn-disabled-color: var(--bs-secondary);
        --bs-btn-disabled-border-color: var(--bs-secondary);
        --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    }

    &.btn-success {
        --bs-btn-color: var(--bs-body-bg);
        --bs-btn-hover-color: var(--bs-body-bg);
        --bs-btn-active-color: var(--bs-body-bg);
        --bs-btn-disabled-color: var(--bs-body-bg);
    }

    &.btn-danger {
        --bs-btn-color: var(--bs-body-bg);
        --bs-btn-hover-color: var(--bs-body-bg);
        --bs-btn-active-color: var(--bs-body-bg);
        --bs-btn-disabled-color: var(--bs-body-bg);
    }
}

.btn-close {
    &:focus {
        outline: 0;
        box-shadow: none;
    }

    &:focus-visible {
        outline: 0;
    }
}

.dropdown {
    .dropdown-menu {
        --bs-dropdown-link-hover-bg: transparent;
        --bs-dropdown-link-hover-color: var(--bs-secondary);
        --bs-dropdown-link-active-bg: transparent;
        --bs-dropdown-link-active-color: var(--bs-secondary);
    }
}

.input-group {
    background: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    &:has(:focus) {
        border-color: var(--bs-primary);
    }

    &:has(.border-danger) {
        border-color: var(--bs-danger);
    }

    * {
        background: transparent;
        border: none;
    }
}

.form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 0;
    margin: 0;
    padding: 0;

    .form-check-input {
        margin: 0;
        font-size: 1rem;

        &:checked {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);

            &[type="checkbox"] {
                --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23232323' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
            }
        }
    }

    * {
        cursor: pointer;
        margin: 0;

        &:focus {
            border-color: var(--bs-primary);
            box-shadow: none;
        }
    }
}

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

.form-floating {
    > .ts-wrapper {
        font-size: 1rem;
        min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));

        > .ts-control {
            background-color: var(--bs-body-bg);
            background-image: none;
            color: var(--bs-body-color);
            min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
            padding: 1.5rem .75rem .5rem;

            > input {
                color: var(--bs-body-color);

                &::placeholder {
                    color: transparent;
                }
            }
        }

        &.focus {
            > .ts-control {
                border-color: var(--bs-primary);
                box-shadow: none;
            }

            ~ label {
                color: rgba(var(--bs-body-color-rgb), .65);
                transform: scale(.85) translateY(-.5rem) translateX(.15rem);
            }
        }

        &.has-items ~ label {
            color: rgba(var(--bs-body-color-rgb), .65);
            transform: scale(.85) translateY(-.5rem) translateX(.15rem);
        }

        > .ts-dropdown {
            background-color: var(--bs-body-bg);
            border-color: var(--bs-border-color);
            color: var(--bs-body-color);

            .active {
                background-color: var(--bs-secondary-bg);
                color: var(--bs-body-color);
            }
        }
    }

    > svg {
        position: absolute;
        top: 50%;
        right: .75rem;
        z-index: 3;
        display: flex;
        align-items: center;
        color: var(--bs-secondary);
        pointer-events: none;
        transform: translateY(-50%);
    }
}

.modal {
    --bs-modal-border-radius: .5rem;

    .modal-header {
        padding: 1rem;
        border-bottom: none;

        .modal-title {
            font-size: 1.25rem;
        }
    }

    .modal-footer {
        padding: 0 1rem 1rem;
        border-top: none;

        > * {
            margin: 0;
        }

        button {
            width: 100%
        }
    }
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-color: var(--bs-secondary);
    --bs-accordion-active-bg: var(--bs-body-bg);

    .accordion-button {
        &:not(.collapsed) {
            box-shadow: none;
        }

        &::after {
            --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F9C33E' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
            --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23D6A533' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        }
    }
}

.pagination {
    --bs-pagination-hover-bg: var(--bs-secondary-bg);
    --bs-pagination-focus-bg: var(--bs-secondary-bg);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: var(--bs-body-bg);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-disabled-color: var(--bs-body-color);
    --bs-pagination-disabled-bg: var(--bs-body-bg);
    margin: 1rem;
}

.card {
    --bs-card-border-color: var(--bs-border-color);
}

.alert {
    --bs-alert-margin-bottom: 0;
}

.badge {
    --bs-badge-color: var(--bs-primary);
    margin: auto 0;
}
