@import 'colors';
@import 'variables';
@import 'functions';
@import 'typography';
@import 'breakpoints';
@import 'buttons';
@import 'placeholders';
@import '../grid';
@import '../fills';

@mixin html {
    @include default($genericFontSize);
    color: $body-color;
}

@mixin title-xxLarge { @include title($headingFontSizeXXLarge); }
@mixin title-xLarge { @include title($headingFontSizeXLarge); }
@mixin title-large { @include title($headingFontSizeLarge); }
@mixin title-1 { @include title($headingFontSize1); }
@mixin title-2 { @include title($headingFontSize2, $headingLineHeight2); }
@mixin title-3 { @include title($headingFontSize3); }
@mixin title-4 { @include title($headingFontSize4); }
@mixin title-5 { @include title($headingFontSize5); }
@mixin title-6 { @include title($headingFontSize6); }
@mixin title-7 { @include title($headingFontSize7); }
@mixin title-8 { @include title($headingFontSize4, $headingLineHeight4)}

@mixin title-base-2 { @include title-base($headingFontSize2); }
@mixin title-base-3 { @include title-base($headingFontSize3); }
@mixin title-base-4 { @include title-base($headingFontSize4); }

@mixin text-xxLarge { @include text($bodyFontSizeXXLarge); }
@mixin text-xLarge { @include text($bodyFontSizeXLarge); }
@mixin text-large { @include text($bodyFontSizeLarge); }
@mixin text-1 { @include text($bodyFontSize1); }
@mixin text-2 { @include text($bodyFontSize2); }
@mixin text-3 { @include text($bodyFontSize3); }
@mixin text-4 { @include text($bodyFontSize4); }
@mixin text-5 { @include text($bodyFontSize5); }
@mixin text-6 { @include text($bodyFontSize6); }
@mixin text-7 { @include text($bodyFontSize7); }
@mixin text-lower {
    text-transform: lowercase;
}
@mixin text-upper {
    text-transform: uppercase;
}

@mixin paragraph {
    @include text($bodyFontSize4);
    margin: 1em 0;
    &:first-child {
        margin-top: 0;
    }
    &:last-child {
        margin-bottom: 0;
    }
}

@mixin blockquote {
    @include paragraph;
    padding-left: 20px;
    border-left: 4px solid $gray;
}

@mixin color-title($defaultColor: $deep-gray) { color: var(--titleText, $defaultColor); }
@mixin color-body($defaultColor: $deep-gray) { color: var(--bodyText, $defaultColor); }

@mixin color-primary { color: $primary-color; }
@mixin color-deepGray { color: $deep-gray; }
@mixin color-darkGray { color: var(--bodyText, $dark-gray); }
@mixin color-gray { color: $gray; }
@mixin color-midGray { color: $mid-gray; }
@mixin color-lightGray { color: $light-gray; }
@mixin color-faintGray { color: $faint-gray; }
@mixin color-white { color: $white; }

@mixin background-primary { background-color: $primary-color; }
@mixin background-deepGray { background-color: $deep-gray; }
@mixin background-darkGray { background-color: $dark-gray; }
@mixin background-gray { background-color: $gray; }
@mixin background-midGray { background-color: $mid-gray; }
@mixin background-lightGray { background-color: $light-gray; }
@mixin background-faintGray { background-color: $faint-gray; }
@mixin background-white { background-color: $white; }
@mixin background-emphasis { background-color: $emphasis-color; }
@mixin background-emphasis-v2 { background-color: $emphasis-colorv2; }
@mixin background-selected { background-color: $blue-98; }

@mixin border-primary { border: 1px solid $primary-color; }
@mixin border-deepGray { border: 1px solid $deep-gray; }
@mixin border-darkGray { border: 1px solid $dark-gray; }
@mixin border-darkGray-2 { border: 1px solid $dark-gray-2; }
@mixin border-gray { border: 1px solid $gray; }
@mixin border-midGray { border: 1px solid $mid-gray; }
@mixin border-lightGray { border: 1px solid $light-gray; }
@mixin border-faintGray { border: 1px solid $faint-gray; }
@mixin border-white { border: 1px solid $white; }
@mixin border-selected { border: 3px solid $primary-color; }


@mixin border-radius($radius: 50%) {
    border-radius: $radius;
}

@mixin fit($property: cover, $position-x: center, $position-y: center) {
    object-fit: $property;
    object-position: $position-x $position-y;
    font-family: 'object-fit: #{$property}; object-position: #{$position-x};';
}

@mixin word-wrap {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
    word-break: break-word;
    hyphens: auto;
}

@mixin line-clamp($numberOfLines: 3) {
    display: -webkit-box;
    -webkit-line-clamp: $numberOfLines;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@mixin fixed-body {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@mixin focus-outline-style($outline-color: $blue-40) {
    outline: 2px solid $outline-color;
    outline-offset: 2px;
}

@mixin focus-outline($outline-color: $blue-40) {
    &:focus-visible {
        @include focus-outline-style($outline-color);
    }
}

/* make sure to set the relevant parent to position relative */
@mixin full-window-width {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    margin-left: -50vw;
    z-index: 0;
}

@mixin page-width {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

@mixin sub-menu-nub {
    &::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background-color: $white;
    border: 1px solid $gray-80;
    border-bottom-color: transparent;
    border-right-color: transparent;
    position: absolute;
    top: 0;
    right: 25%;
    transform: translateY(-50%) rotate(45deg);
    z-index: -1;
    }
}

@mixin fill-header-arrow-svg-color($fill-color: $link-color){
    // fill svg elements color for header arrows
    &.buttonIcon_icon--angleDown, &.buttonIcon_icon--angleUp {
        g, path {
            fill: $fill-color;
        }
    }
}

@mixin underline-hover-initial($links-border-thickness: 2px, $link-color-hover: $header-nav-link-hover-color) {
    @include media-md-up {
        position: relative;

        &::after {
            content: "";
            display: block;
            width: 100%;
            height: 0;
            border-bottom: $links-border-thickness solid $link-color-hover;
            position: absolute;
            bottom: 0;
            left: 0;
            transition: opacity 0.2s ease-out;
            opacity: 0;
        }
    }
}

@mixin underline-hover-active($underline-color: $link-color-hover, $links-border-thickness: 2px) {
    @include media-md-up {
        &::after {
            opacity: 1;
            border-bottom: $links-border-thickness solid $underline-color;
        }
    }
}

@mixin fill-icon($fill-color) {
    width: 24px;
    circle {
        fill: $fill-color;
    }
    path {
        @include fill-white;
    }
}

@mixin required {
    &--required:before {
        content: "* ";
        color: $form-error-color;
    }
}
