@import '_variables.css';

main {
    a:not(.btn, .card-wrapper) {
        color: var(--link-color-default);
        text-decoration: none !important;
        transition: all 0.2s ease;
        align-items: center;

        &:hover {
            color: var(--link-color-hover) !important;
        }
    }
}

.btn {
    padding: 0.375rem 0.75rem;
    font-family: var(--font-family-body);
    font-size: 1rem;
    font-weight: 500;
    line-height: 150%;
    transition: all 0.2s ease;
    display: inline-flex;
    vertical-align: middle;
    border-radius: var(--border-radius-sm);

    @container (min-width: 48rem) {
        padding: 0.75rem 1.5rem;
    }

    &:focus-visible {
        outline: none;
        border: 0.25rem solid var(--blue-100);
    }

    &:before {
        padding-right: 0.5rem;
    }

    &:after {
        padding-left: 0.5rem;
    }

    &.transparent {
        background-color: transparent;
    }

    &.btn-primary {
        color: var(--bs-white);
        background: var(--link-color-default);
        border: 0.125rem solid var(--link-color-default);

        &:active {
            background: var(--blue-500);
            border: 0.125rem solid var(--blue-500);
        }

        &:hover {
            background: var(--link-color-hover);
        }

        &:focus {
            border: 0.25rem solid var(--blue-100);
            background: var(--link-color-default);
        }

        &:disabled {
            border: 0.125rem solid var(--color-fernuni-ultralight);
            background: var(--color-fernuni-ultralight);
        }
    }

    &.btn-secondary {
        color: var(--link-color-default);
        border: 2px solid var(--link-color-default);

        &:hover {
            background: var(--blue-25, #F5F8FD);
        }

        &:focus {
            color: var(--bs-white);
            border: 0.25rem solid var(--blue-100);
            background: var(--link-color-default);
        }

        &:active {
            color: var(--bs-white);
            background: var(--link-color-default);
        }

        &:disabled {
            color: var(--color-fernuni-ultralight);
            border: 2px solid var(--color-fernuni-ultralight);
        }
    }

    &.btn-research-primary {
        color: var(--bs-white);
        background: var(--link-color-default);
        border: 1px solid var(--link-color-default);

        &:hover {
            border: 1px solid var(--primary);
            background-color: var(--primary);
        }

        &:disabled {
            border: 1px solid var(--bs-gray-300);
            background: var(--bs-gray-300);
        }
    }

    &.btn-research-secondary {
        color: var(--link-color-default);
        background: var(--bg-fernuni);
        border: 1px solid var(--link-color-default);

        &:hover {
            color: var(--bs-white);
            border: 1px solid var(--link-color-default);
            background: var(--link-color-default);
            transform: none;
        }

        &:disabled {
            border: 1px solid #d1d1d6;
            background: var(--bs-gray-100);
            color: #d1d1d6;
        }
    }

    &.btn-ghost {
        color: var(--secondary);
        padding: 0.375rem 0.75rem;
        font-family: var(--font-family-body) !important;

        &:hover {
            color: var(--link-color-hover);
            background-color: var(--blue-25);
        }

        &:active {
            color: var(--primary);
        }

        &:disabled {
            color: var(--color-fernuni-ultralight);
        }

        @container screen (min-width: 48rem) {
            padding: 0.75rem 1.5rem;
        }
    }

    &.btn-success {
        background-color: var(--green-50);
        color: var(--green-300);
        border: 1px solid var(--green-50);

        &:hover,
        &:active,
        &:focus {
            background-color: var(--green-25);
            color: var(--green-200);
            border: 1px solid var(--green-25);
        }

        &:disabled {
            background-color: var(--gray-200);
            color: var(--gray-400);
            border: 1px solid var(--gray-200);
        }
    }

    &.btn-danger {
        background-color: var(--red-50);
        color: var(--red-300);
        border: 1px solid var(--red-50);

        &:hover,
        &:active,
        &:focus {
            background-color: var(--red-25);
            color: var(--red-200);
            border: 1px solid var(--red-25);
        }

        &:disabled {
            background-color: var(--gray-200);
            color: var(--gray-400);
            border: 1px solid var(--gray-200);
        }
    }


    &.icon-download:before {
        content: "\f30a";
        font-family: bootstrap-icons !important;
    }

    &.icon-arrow-right:after {
        content: "\f138";
        font-family: bootstrap-icons !important;
    }

    &.icon-arrow-left:before {
        content: "\f12f";
        font-family: bootstrap-icons !important;
    }

    &.icon-arrow-left-short:before {
        content: "\f12c";
        font-family: bootstrap-icons !important;
    }

    &.icon-arrow-right-short:after {
        content: "\f135";
        font-family: bootstrap-icons !important;
    }

    &.icon-edit:after {
        content: "\f4ca";
        font-family: bootstrap-icons !important;
    }
}

span.fernuni-icons,
a.fernuni-icons {
    display: inline-flex;
    flex-direction: row;
    align-items: center;

    &[class*="icon-"]:before {
        font-size: 1.5rem;
        line-height: 100%;
        border-radius: 0.375rem;
        padding: 0.25rem;
    }

    &.icon-law:before,
    &.icon-law-balance:before {
        color: var(--color-law);
        background-color: var(--color-law-ultralight);
    }

    &.icon-psychology:before {
        color: var(--color-psychology);
        background-color: var(--color-psychology-ultralight);
    }

    &.icon-economy-management:before {
        color: var(--color-economy);
        background-color: var(--color-economy-ultralight);
    }

    &.icon-history-science:before {
        color: var(--color-history);
        background-color: var(--color-history-ultralight);
    }

    &.icon-mathematics-computer-science:before {
        color: var(--color-maths);
        background-color: var(--color-maths-ultralight);
    }
}

.mobile-header-link {
    display: block;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;

    @container (min-width: 48rem) {
        display: none;
    }
}

.slider-controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;

    @container screen (min-width: 48rem) {
        justify-content: flex-end;
    }

    .slider-control {
        border-radius: 500px;
        transition: all 0.2s ease;
        border: unset;

        &.slider-control-ghost {
            background: var(--blue-25);
            border: 0.25rem solid var(--blue-25);
            color: var(--blue-300);
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            font-size: 1.5rem;
            line-height: 100%;
            border-radius: 500px;
            padding: 0.25rem;

            &:hover {
                color: var(--link-color-hover);
                background-color: var(--blue-50);
            }

            &:focus {
                border: 0.25rem solid var(--blue-100);
            }

            &.active,
            &:active {
                color: var(--primary);
            }

            &:disabled {
                color: var(--color-fernuni-ultralight);

                &:hover {
                    background-color: inherit;
                }
            }

            &.icon-arrow-left-short:before {
                content: "\f12c";
                font-family: bootstrap-icons !important;
            }

            &.icon-arrow-right-short:after {
                content: "\f135";
                font-family: bootstrap-icons !important;
            }
        }
    }
}