@use "variables" as *;

@import "forms";
@import "mixins";
@import "typography";
@import "dotcms-theme/utils/theme-variables"; /* temporary */
@import "dotcms-theme/theme"; /* prime-ng */

// INCLUDE FONT FACES
@include assistant-font-face(400, "Regular");
@include assistant-font-face(500, "SemiBold");
@include assistant-font-face(700, "Bold");

@include redhatmono-font-face(400, "Regular");

// MATERIAL DESIGN ICONS
@font-face {
    font-family: "Material Icons";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/dotAdmin/assets/MaterialIcons-Regular.ttf") format("truetype");
}

.material-icons {
    font-family: "Material Icons", $font-default;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

:root {
    --border-radius: 0.375rem; // 6px;

    @include root-colors();
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    color: $black;
    font-family: $font-default;
}

body {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

a {
    color: $color-palette-primary;

    &:hover {
        text-decoration: none;
    }

    &.link-secondary {
        color: $color-palette-secondary;
    }

    &[actionlink] {
        color: $color-palette-secondary;
        font-size: $button-tiny-text-size;
        text-transform: uppercase;
        cursor: pointer;
    }
}

button {
    font-family: $font-default;
}

/*

Dragula clone and append dragged element to the body we need to have their styles globally.
However this is for the dragula we use in the angular components the one in the edit page have their own place because we inject it to the page iframe

*/

.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 1;
    transform-origin: right top;
}
.gu-hide {
    display: none !important;
}
.gu-unselectable {
    user-select: none !important;
}

code {
    color: $color-accessible-text-purple;
    background-color: $color-accessible-text-purple-bg;
    padding: $spacing-0 $spacing-1;
    font-family: $font-code;
    line-break: anywhere;
}

.dot-mask {
    background-color: transparent;
    backdrop-filter: none;
    pointer-events: auto;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.cursor-not-allowed {
    cursor: not-allowed;
}
