@use 'components/forms/buttons/buttons.scss';

/* Temporary global styling while Bootstrap is being removed/Cloud 2.0 is implemented */

button, a {
    &.nx-button--primary {
        @include buttons.nx-button();
        @include buttons.nx-button--primary();
    }
}
button, a {
    &.nx-button--default {
    @include buttons.nx-button();
        @include buttons.nx-button--default();
    }
}
button, a {
    &.nx-button--danger {
    @include buttons.nx-button();
        @include buttons.nx-button--danger();
    }
}
a.nx-button--primary,
a.nx-button--default,
a.nx-button--danger{
    text-decoration: none;
}

@mixin _nx-header-base {
    font-weight: lighter;
    line-height: 1.2;
    font-family: var(--font-family-medium);
}

.nx-h1 {
    @include _nx-header-base();
    margin-top: 0;
    margin-bottom: 0;
    &--vertical-margin {
        @extend .nx-h1;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    &--bottom-margin {
        @extend .nx-h1;
        margin-bottom: 1rem;
    }
    font-size: 2rem;
    color: var(--h1);
}
.nx-h2 {
    @include _nx-header-base();
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.5rem;
    color: var(--h2);
}
.nx-h3 {
    @include _nx-header-base();
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.125rem;
    color: var(--h3);
}
.nx-h4 {
    @include _nx-header-base();
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.9375rem;
    color: var(--h4);
}
.nx-h5 {
    @include _nx-header-base();
    margin-top: 0;
    margin-bottom: 0;
    &--bottom-margin {
        @extend .nx-h5;
        margin-bottom: 0.5rem;
    }
    font-size: 0.875rem;
    color: var(--h5);
}
.nx-h6 {
    @include _nx-header-base();
    margin-top: 0;
    margin-bottom: 0;
    font-size: 0.8125rem;
    color: var(--h6);
}

.nx-paragraph {
    margin-bottom: 0;
    margin-top: 0;

    &--stacked + &--stacked {
        margin-top: 0.5rem;
    }
}

.nx-anchor {
    color: var(--anchor-color);
    text-decoration: underline;
    &:hover {
        color: var(--anchor-hover-color);
        text-decoration: underline;
    }
    &:focus-visible {
        box-shadow : 0 0 0 2px var(--brand-l2-t40);
        outline: none;
    }
}

.nx-hr {
    margin-top: 0rem;
    margin-bottom: 0rem;
    border: 0;
    border-top: 1px solid rgba($black, .1);

    &--vertical-margin {
        @extend .nx-hr;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    &--bottom-margin {
        @extend .nx-hr;
        margin-bottom: 1rem;
    }
}

.nx-preformat {
    margin-top: 0;
    margin-bottom: 0;
    font-family: var(--font-family-monospace);
    overflow: auto;
    &--bottom-margin {
        @extend .nx-preformat;
        margin-bottom: 1rem;
    }
}

.nx-code {
    padding: 0 2px;
    border-radius: 2px;
    font-family: var(--font-family-monospace);
    font-size: 95%;
    color: var(--card-header-text);
    border: solid 1px var(--border-color);
    background: var(--card-header-bg);
}

.nx-ul,
.nx-ol {
    margin-top: 0;
    margin-bottom: 0;
    padding-inline-start: calc(0.875rem + (1.5rem / 2)); // Left align bullets + initial indent

    &--margin-bottom {
        @extend .nx-ul;
        margin-bottom: 1rem;
    }

    .nx-ul,
    .nx-ol {
        padding-inline-start: 1.5rem
    }
}
