@font-face {
    font-family: 'Nippo-Regular';
    src: url(/assets/fonts/Nippo-Regular.woff2) format('woff2');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

* {
    font-family: 'Nippo-Regular';
}

@import "app/layout/styles/layout/layout.scss";
@import "app/layout/styles/theme/themes/vela/bitaxe/theme.scss";

@import "app/layout/styles/modules/primeicons.css";
@import "app/layout/styles/modules/primeng.min.css";

@import "../node_modules/primeflex/primeflex.min.css";


/* You can add global styles to this file, and also import other style files */
p-chart>div {
    position: relative;
    min-height: 40vh;
}

.card {
    &.chart {
        padding: 10px;
    }
}

.hover-next-input:hover + * {
    .p-dropdown {
        border-color: var(--checkbox-hover-bg);
    }
    .p-slider {
        .p-slider-handle {
            border-color: var(--checkbox-hover-bg);
            background-color: var(--checkbox-hover-bg);
        }
        .p-slider-range {
            background-color: var(--checkbox-hover-bg);
        }
    }
}

/* PrimeNG Component Theme Overrides */
.p-slider {
    .p-slider-range {
        background: var(--slider-range-bg);
    }
    .p-slider-handle {
        background: var(--slider-handle-bg);
        border: 2px solid var(--slider-handle-bg);

        &:focus {
            box-shadow: var(--focus-ring);
        }
    }
}

.p-checkbox {
    &:not(.p-checkbox-disabled) {
        .p-checkbox-box {
            &.p-focus,
            &:hover {
                border-color: var(--checkbox-hover-bg);
            }

            &.p-highlight {
                border-color: var(--checkbox-border);
                background: var(--checkbox-bg);

                &:hover {
                    background: var(--checkbox-hover-bg);
                    border-color: var(--checkbox-hover-bg);
                }
            }
        }
    }
}

.p-radiobutton {
    .p-radiobutton-box {
        &:not(.p-disabled):not(.p-highlight):hover,
        &:not(.p-disabled).p-focus {
            border-color: var(--checkbox-hover-bg);
        }

        &.p-highlight {
            border-color: var(--checkbox-border);
            background: var(--checkbox-bg);

            &:not(.p-disabled):hover {
                background: var(--checkbox-hover-bg);
                border-color: var(--checkbox-hover-bg);
            }
        }
    }
}

.p-button:not(.p-button-secondary) {
    background: var(--button-bg);
    border: 1px solid var(--button-bg);

    &:enabled:hover {
        background: var(--button-hover-bg);
        border-color: var(--button-hover-bg);
    }
}

.p-button.p-button-text.color-dot {
    &:enabled:hover {
        background: var(--button-bg);
    }
    &:focus {
        box-shadow: none;
    }
    &:enabled:focus {
        box-shadow: none;
    }
}

// Remove focus ring from theme color buttons
button.color-dot {
    &:focus {
        outline: none !important;
        box-shadow: none !important;
    }
}

.p-togglebutton {
    &.p-highlight {
        background: var(--togglebutton-bg);
        border-color: var(--togglebutton-bg);

        &:hover {
            background: var(--togglebutton-hover-bg);
            border-color: var(--togglebutton-hover-bg);
        }
    }
}

.p-inputtext {
    background: transparent !important;
    transition: none !important;
    box-shadow: none !important;
    outline: none !important;

    &:enabled:hover,
    &:enabled:focus {
        border-color: var(--togglebutton-hover-bg) !important;
    }
}

/* Progress Bar Theme Override */
.p-progressbar {
    background: var(--progressbar-bg);

    .p-progressbar-value {
        background: var(--progressbar-value-bg);
    }

    &--thin {
        height: 6px !important;
    }
}

/* Dropdown Theme*/
.p-dropdown {
    background: transparent !important;
    transition: none !important;
    box-shadow: none !important;
    outline: none !important;

    &:hover,
    &:focus,
    &.p-dropdown-open {
        border-color: var(--togglebutton-hover-bg) !important;
    }

    .p-dropdown-panel {
        background: var(--surface-overlay) !important;

        .p-dropdown-items {
            padding: 0;

            .p-dropdown-item {
                &:hover {
                    background: var(--highlight-bg) !important;
                    color: var(--highlight-text-color) !important;
                }

                &.p-highlight {
                    background: var(--highlight-bg) !important;
                    color: var(--highlight-text-color) !important;
                }
            }
        }
    }

    .p-overlay {
        left: -1px !important;
        right: -1px !important;
    }

    &--small {
        .p-dropdown-label,
        .p-dropdown-item {
            font-size: small;
        }
    }
    &--border-color-primary {
        border-color: var(--primary-color);
    }
}

.p-button-icon {
    font-size: 1.2rem;
}

.p-dialog {
    @extend .card;
    margin: 1rem;

    &-header,
    &-content {
        padding: 0;
        margin: 0;
        background: none;
    }

    &-header {
        margin: 0 0 2rem;
    }

    &-header-icon {
        @extend .p-button;
        width: 2.2rem;
        height: 2.2rem;
        color: #fff;
        border-radius: 0;
    }

    &-title {
        @extend h2;
        margin: 0;
    }
}