/*
 * This CSS file provides styles for:
 *
 * - boostrap buttons
 * - classic buttons
 * - <a> elements styled as buttons
 * - tab navigation buttons
 * - pagination controls.
 *
 * It defines appearance, layout, and interactive states to ensure a consistent UI.
 */

/** BEGIN bootstrap buttons **/
.btn-close {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    /*background: transparent;*/
    border: none;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    /*color: #000;*/
    opacity: 0.6;
}

.btn-close:hover {
    opacity: 1;
}
/** END classic buttons **/

/** BEGIN classic buttons **/
button, a.primary {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 16px !important;
    text-decoration: none;
    cursor: pointer;
    border-radius: 0!important;
}

a.primary, button.primary {
    border: 1px solid var(--Primary-primary);
    background: var(--Primary-primary);
    color: var(--Theme-Body-Background);
}

a.primary:hover, button.primary:hover {
    border: 1px solid var(--Primary-primary);
    color: var(--Primary-primary);
    background: var(--Theme-Body-Background);
    opacity: 1;
}

button.tertiary {
    border: 1px solid var(--tertiary-tertiary);
    background: var(--tertiary-tertiary);
}

button.danger {
    border: 1px solid var(--Theme-Danger);
    color: var(--Theme-Danger);
    background: var(--HitBox);
}

button.danger:hover {
    border: 1px solid var(--Theme-Danger);
    background: var(--Theme-Danger);
    color: var(--Theme-Body-Background);
}

button.nav-link {
    background-color: unset;
    color: var(--text-100);
    align-self: flex-start;
    border-radius: 0!important;
}

button.nav-link.active {
    background-color: var(--Primary-primary) !important;
    color: var(--Theme-Body-Background)
}

button.nav-link:focus {
    background-color: var(--Primary-primary) !important;
    color: var(--Theme-Body-Background)
}

button.nav-link:not(.active):hover {
    opacity: 0.5;
    color: var(--text-100) !important;
}

/** END classic buttons **/

/** BEGIN tabs buttons **/
.edia-tab {
    cursor: pointer;
    text-decoration: none;
    font-weight: 400;
    padding: 1rem;
}

.edia-tab.active {
    font-weight: 800;
    border-bottom: 2px solid var(--Primary-primary);
}

.edia-tab.active, .edia-tab:hover {
    opacity: 1;
}

/** END tabs buttons **/

/** BEGIN pagination **/
.page-link {
    background-color: transparent !important;
    border: none !important;
    color: var(--Primary-primary) !important;
    height: 100%;
    align-content: center;
    /* border-radius: 8px; */
}

.page-link:focus {
    box-shadow: 0 0 0 .25rem var(--Primary-primary-35);
}

.page-item.active .page-link {
    background-color: var(--Primary-primary) !important;
    color: var(--Theme-Body-Background) !important;
}

/** END pagination **/

.dropdown-item.active {
    background-color: var(--Primary-primary-focus) !important;
}

@media (max-width: 1024px) {
    .edia-tab {
        padding: 5px;
    }
}


@media (max-width: 768px) {
    .edia-tab {
        padding: 0;
    }

    .edia-tab span {
        font-size: 16px;
        letter-spacing: -0.5px;
    }
}