@import 'bulma/bulma';
@import 'flatpickr/dist/flatpickr';
@import '@enso-ui/themes/bulma/overrides';
@import '@enso-ui/themes/bulma/helpers';
@import '@enso-ui/themes/bulma/components';
@import '@enso-ui/menus/src/bulma/styles/menu';
@import '@enso-ui/ui/src/bulma/styles/components';
@import '@app/sass/app';

[v-cloak] {
    display: none;
}

*:focus {
    outline: 0;
}

@media screen and (max-width: 769px) {
    .columns.is-reverse-mobile {
        flex-direction: column-reverse;
        display: flex;
    }

    .level.is-mobile {
        .level-left,
        .level-right {
            flex-direction: row;
        }
    }

    .button > .is-hidden-mobile + .icon:last-child {
        margin-inline-start: calc(-0.5 * var(--bulma-button-padding-horizontal));
        margin-inline-end: calc(-0.5 * var(--bulma-button-padding-horizontal));
    }
}

.mx-a {
    margin-left: auto;
    margin-right: auto;
}

.min-w-0 {
    min-width: 0;
}

.is-bold {
    font-weight: bold;
}

.is-clickable {
    cursor: pointer;
}

.has-text-muted {
    color: var(--bulma-text-light);
}

@media screen and (max-width: 1023px) {
    .app-navbar {
        display: flex;
        align-items: stretch;

        .navbar-brand,
        .navbar-menu,
        .navbar-end {
            align-items: stretch;
            display: flex;
        }

        .navbar-menu {
            background-color: transparent;
            box-shadow: none;
            flex-grow: 1;
            flex-shrink: 0;
            padding: 0;
        }

        .navbar-end {
            justify-content: flex-end;
            margin-inline-start: auto;
        }

        .navbar-brand .navbar-item,
        .navbar-end .navbar-item,
        .navbar-end .navbar-link {
            align-items: center;
            display: flex;
        }
    }
}

.is-white-space-pre-wrap {
    white-space: pre-wrap;
}

.is-naked {
    color: inherit;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    opacity: 0.7;
    transition: opacity ease 0.2s, color ease 0.2s;

    &:hover,
    &:focus,
    &:active,
    &.is-focused,
    &.is-active {
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        opacity: 1;
    }
}

.is-scrollable {
    overflow: scroll;
}

.no-scrollbars {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;

    &::-webkit-scrollbar {
        display: none;
    }
}

body {
    font-size: var(--bulma-body-font-size);
    font-weight: var(--bulma-body-weight);
    line-height: normal;
    letter-spacing: 0;
    color: var(--bulma-body-color);
}

.label,
.navbar-brand,
.tabs a {
    font-family: var(--bulma-family-secondary);
}

.button {
    font-family: var(--enso-font-ui);
}

.title,
.card .card-header-title {
    font-family: var(--enso-font-ui);
}

.subtitle {
    font-family: var(--enso-font-ui);
}

.card {
    --bulma-card-header-shadow: none;
}

.input,
.textarea,
.select select,
.button.input,
.button,
.flatpickr-input.input {
    font-size: var(--bulma-body-font-size);
    font-weight: var(--bulma-body-weight);
    line-height: normal;
    letter-spacing: 0;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.input,
.textarea,
.select select,
.button,
.button.input,
.flatpickr-input.input,
.file-cta,
.file-name,
.pagination-ellipsis,
.pagination-link,
.pagination-next,
.pagination-previous {
    min-height: var(--bulma-control-height);
    height: var(--bulma-control-height);
}

.input.is-small,
.textarea.is-small,
.select.is-small select,
.button.is-small,
.button.input.is-small,
.flatpickr-input.input.is-small,
.file.is-small .file-cta,
.file.is-small .file-name,
.pagination.is-small .pagination-ellipsis,
.pagination.is-small .pagination-link,
.pagination.is-small .pagination-next,
.pagination.is-small .pagination-previous {
    font-size: var(--bulma-size-small);
}

.input.is-medium,
.textarea.is-medium,
.select.is-medium select,
.button.is-medium,
.button.input.is-medium,
.flatpickr-input.input.is-medium,
.file.is-medium .file-cta,
.file.is-medium .file-name,
.pagination.is-medium .pagination-ellipsis,
.pagination.is-medium .pagination-link,
.pagination.is-medium .pagination-next,
.pagination.is-medium .pagination-previous {
    font-size: var(--bulma-size-medium);
}

.input.is-large,
.textarea.is-large,
.select.is-large select,
.button.is-large,
.button.input.is-large,
.flatpickr-input.input.is-large,
.file.is-large .file-cta,
.file.is-large .file-name,
.pagination.is-large .pagination-ellipsis,
.pagination.is-large .pagination-link,
.pagination.is-large .pagination-next,
.pagination.is-large .pagination-previous {
    font-size: var(--bulma-size-large);
}

.button,
.button.input {
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none;
}

.button.is-outlined:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-black):not(.is-dark):not(.is-light):not(.is-white) {
    background-color: transparent;
    border-color: var(--enso-surface-border);
    color: var(--bulma-text);
    box-shadow: none;

    &:hover,
    &.is-hovered,
    &:active,
    &.is-active {
        background-color: var(--bulma-card-header-background-color);
        border-color: var(--bulma-border-active);
        color: var(--bulma-text-strong);
        box-shadow: none;
    }

    &[disabled],
    fieldset[disabled] & {
        background-color: transparent;
        border-color: var(--enso-surface-border);
        color: var(--bulma-text-light);
        box-shadow: none;
        opacity: 0.65;
    }
}

.button.is-naked,
.button.input.is-naked {
    border-color: transparent;
    box-shadow: none;

    &[disabled],
    fieldset[disabled] & {
        border-color: transparent;
        background-color: transparent;
        box-shadow: none;
    }
}

:is(.input, .textarea, .flatpickr-input.input, .select select) {
    --enso-control-hover-border-color: var(--bulma-border-hover);
    --enso-control-active-border-color: var(--bulma-border-active);
}

.input:not(.is-naked):hover,
.textarea:not(.is-naked):hover,
.flatpickr-input.input:not(.is-naked):hover,
.select select:not(.is-naked):hover {
    border-color: var(--enso-control-hover-border-color);
}

.input:not(.is-naked):focus,
.input:not(.is-naked):focus-visible,
.input:not(.is-naked).is-focused,
.input:not(.is-naked).is-active,
.textarea:not(.is-naked):focus,
.textarea:not(.is-naked):focus-visible,
.textarea:not(.is-naked).is-focused,
.textarea:not(.is-naked).is-active,
.flatpickr-input.input:not(.is-naked):focus,
.flatpickr-input.input:not(.is-naked):focus-visible,
.flatpickr-input.input:not(.is-naked).is-focused,
.flatpickr-input.input:not(.is-naked).is-active,
.select select:not(.is-naked):focus,
.select select:not(.is-naked):focus-visible,
.select select:not(.is-naked).is-focused,
.select select:not(.is-naked).is-active {
    border-color: var(--enso-control-active-border-color);
    box-shadow: none;
}

:is(.input, .textarea, .flatpickr-input.input).is-danger,
.select.is-danger select {
    --enso-control-hover-border-color: var(--bulma-danger);
    --enso-control-active-border-color: var(--bulma-danger);
    border-color: var(--bulma-danger) !important;
}

:is(.input, .textarea, .flatpickr-input.input).is-warning,
.select.is-warning select {
    --enso-control-hover-border-color: var(--bulma-warning);
    --enso-control-active-border-color: var(--bulma-warning);
    border-color: var(--bulma-warning) !important;
}

:is(.input, .textarea, .flatpickr-input.input).is-success,
.select.is-success select {
    --enso-control-hover-border-color: var(--bulma-success);
    --enso-control-active-border-color: var(--bulma-success);
    border-color: var(--bulma-success) !important;
}

:is(.input, .textarea, .flatpickr-input.input)::placeholder {
    color: var(--bulma-text-light) !important;
    opacity: 1;
}

.tag {
    border-radius: var(--bulma-tag-radius);
    height: 1.6em;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.tag.is-delete {
    width: 1.6em;
    min-width: 1.6em;
    height: 1.6em;
}

.tag.is-small {
    font-size: calc(var(--bulma-size-small) * 0.85);
    height: 1.45em;
    padding-left: 0.45em;
    padding-right: 0.45em;
}

.tag.is-small.is-delete {
    width: 1.45em;
    min-width: 1.45em;
    height: 1.45em;
    padding: 0;
}

.label {
    font-size: calc(var(--bulma-size-normal) * 0.9);
    opacity: 1;
    font-weight: var(--bulma-label-weight);
    line-height: normal;
    letter-spacing: 0;
    color: var(--bulma-label-color);
}

.label.is-small {
    font-size: calc(var(--bulma-size-small) * 0.9);
}

.label.is-medium {
    font-size: calc(var(--bulma-size-medium) * 0.9);
}

.label.is-large {
    font-size: calc(var(--bulma-size-large) * 0.9);
}

@mixin dark-theme-overrides {
    .delete,
    .modal-close {
        background-color: var(--bulma-scheme-main-ter);

        &:hover {
            background-color: var(--bulma-scheme-main-bis);
        }
    }

    .label {
        color: var(--bulma-text-strong);
    }

    .tag:not(body):not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger):not(.is-black):not(.is-dark):not(.is-light):not(.is-white) {
        background-color: var(--bulma-scheme-main-ter);
    }

    .tag.is-dark {
        color: var(--bulma-text-strong);
    }
}

[data-theme='dark'],
.theme-dark {
    @include dark-theme-overrides;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        @include dark-theme-overrides;
    }
}