/* Global styles. Place where eventually import other style files. */
@import "./assets/scss/variables";
@import "node_modules/bootstrap/scss/bootstrap";
@import "./assets/scss/themes";
@import "./assets/scss/mixins";
@import "./assets/scss/bootstrapOverrides";

@font-face {
    font-family: "Junicode";
    src: url("./assets/fonts/Junicode.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Junicode";
    src: url("./assets/fonts/Junicode-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Junicode";
    src: url("./assets/fonts/Junicode-Italic.woff") format("woff");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Junicode";
    src: url("./assets/fonts/Junicode-BoldItalic.woff") format("woff");
    font-weight: bold;
    font-style: italic;
}

html,
body {
    height: 100%;
}

body {
    overflow: hidden;
}

.edition-font {
    font-family: Junicode, Times, serif;
}

.ui-font {
    font-family: Arial, sans-serif; // TODO: decide which font to use for the UI
}

// ng-select overwrites
.ng-select {
    position: relative;
    display: inline-flex !important;
    vertical-align: middle;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    padding-left: 5px;
    padding-right: 5px;

    .ng-select-container .ng-value-container .ng-placeholder {
        top: 0 !important;
        position: relative !important;
    }

    &.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
        border: none;
    }

    .ng-select-container {
        height: 31px !important;
        min-height: 31px;
        vertical-align: middle;
        border: none;
        padding-left: 5px;

        @include themify($themes) {
            background-color: themed("toolsBackground") !important;
            color: themed("toolsColor");
        }
    }

    .ng-arrow-wrapper {
        padding-left: 6px;
        user-select: none;
        height: 100%;
        width: 24px;
        opacity: 0.5;

        &:hover {
            opacity: 1;
        }

        @include themify($themes) {
            background-color: themed("toolsBackgroundDarker") !important;
        }

        .ng-arrow {
            border-width: 5px 5px 0;
            vertical-align: text-bottom;

            @include themify($themes) {
                border-color: themed("baseColorDark") transparent transparent;
            }
        }
    }

    &.ng-select-opened > .ng-select-container {
        .ng-arrow-wrapper {
            opacity: 1;

            .ng-arrow {
                @include themify($themes) {
                    border-color: transparent transparent themed("baseColorDark");
                }
            }
        }
    }

    .ng-dropdown-panel {
        @include themify($themes) {
            background-color: themed("toolsBackground") !important;
            color: themed("toolsColor");
        }
    }
    .ng-dropdown-panel-items {
        @include set("box-shadow", "0 0.125rem 0.25rem rgba(0, 0, 0, 0.1)");

        .ng-option {
            @include themify($themes) {
                background-color: themed("toolsBackground") !important;
                color: themed("toolsColor");
            }
            &.ng-option-marked {
                @include themify($themes) {
                    background-color: rgba(themed("baseColorDark"), 0.1) !important;
                }
            }
            &.ng-option-selected {
                @include themify($themes) {
                    background-color: themed("baseColorDark") !important;
                    color: themed("baseColorLight") !important;
                }
            }
        }
    }

    &.ng-select-opened {
        .ng-arrow-wrapper .ng-arrow {
            border-width: 0 4px 4px;
        }
    }
}

.overflow-y-auto {
    overflow-y: auto;
}

.pointer {
    cursor: pointer;
}

.abbr,
.expan {
    color: purple;
    text-decoration: underline;
}

.ex {
    font-style: italic;
}

.hidden {
    display: none;
}

.btn-close {
    height: 20px !important;
    width: 20px !important;
    line-height: 0.8rem;
    padding: 0;
    font-size: 0.9rem;
}

.more-info-label {
    display: none !important;

}

// add by FS to manage in scss specific files

ul.lem-details.nav li.nav-item a.ui-font.nav-link {
    color: #000 !important;
}

ul.lem-details.nav li.nav-item a.ui-font.nav-link.active {
    background-color: #f7f7f7;
}

evt-lemmatized-entity.ng-star-inserted div.ne-detail-content.ng-star-inserted {
    background-color: #f7f7f7;
}

.ne-occurrence {
    border-radius: 4px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, 0.5);
    margin-right: 3px;
    font-size: .7rem;
    margin-bottom: 3px;
    display: inline-block !important;
    cursor: pointer;
    line-height: 0.9rem;

    .ne-occurrence-count {
      top: -1px;
      position: relative;
      margin-left: 5px;
      border: 1px solid transparent;
    }

    &:hover {
      background: rgba(255, 255, 255, 0.8) !important;

      .ne-occurrence-count {
        border: 1px solid #ccc;
      }
    }

}

// Provvisorio 
.lemmatizedEntityRef.highlighted {
    background-color: antiquewhite;
}

.external-link-alt {
    color: #000;
}