@import '../../../../ng-aquila/src/shared-styles/theming/theming';
@import '../styles/themes/docs-theme';

$message-border-width: 1px;

/* Global styles */
* {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    margin-bottom: 1em;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Code/markdown styles */
.docs-deprecation-warning {
    border-width: $message-border-width;
    border-style: solid;
    border-color: v(message-warning-border-color);
    padding: 24px - $message-border-width;
    border-radius: v(message-border-radius);
    background-color: v(documentation-message-warning-background-color);
    margin-bottom: 16px;
}

.docs-danger-text {
    color: v(danger);
}

.docs-inverse-container {
    background: v(documentation-inverse-container-background);
    padding: 24px;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: v(negative);
    }
}

.docs-expert-container {
    background: v(documentation-expert-container-background);
    padding: 24px;
}

::ng-deep .docs-markdown--ul {
    margin-left: 24px;
    margin-bottom: 24px;
}

::ng-deep .docs-markdown--li {
    list-style: square;
}

::ng-deep .docs-api {
    font-size: 1rem;
    line-height: 1.5rem;
}

::ng-deep .docs-api-property {
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 0;
}

::ng-deep .docs-api-module-import,
::ng-deep .docs-api__selector-container {
    border-width: 1px;
    border-style: solid;
    border-color: v(documentation-api-codebox-border-color);
    border-radius: 5px;
    letter-spacing: 0.0125rem;
    padding: 12px;
}

::ng-deep .docs-api table,
::ng-deep .docs-markdown--table {
    width: 100%;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: v(table-header-border-top-color);
    border-collapse: collapse;
    font-size: 1rem;
    line-height: 1.5rem;

    margin-bottom: 24px;

    p {
        margin: 0;
    }

    th,
    td {
        padding: 12px;
        text-align: left;
    }

    th,
    tr:last-child td {
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: v(table-border-bottom-color);
    }

    tr td {
        border-bottom-color: v(table-cell-border-top-color);
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }
}

::ng-deep .docs-api-module-import__import-span,
::ng-deep .docs-api-module-import__from-span {
    color: v(documentation-api-code-import-text-color);
}

::ng-deep .docs-api-module-import__path-span {
    color: v(documentation-api-code-path-text-color);
}

::ng-deep .docs-link,
::ng-deep .docs-markdown--p a,
::ng-deep .docs-markdown--li a,
::ng-deep .docs-markdown--table a,
::ng-deep .docs-deprecation-warning a {
    color: v(interactive-text);
    font-weight: 600;

    &:hover {
        color: v(hover-link);
    }

    &:active {
        color: v(active-primary);
    }
}

::ng-deep .docs-api-property__type,
::ng-deep .docs-api-method-parameter-type,
::ng-deep .docs-api-method-returns-type {
    color: v(documentation-api-code-types-text-color);
}

::ng-deep .docs-api-input__keyword,
::ng-deep .docs-api-output__keyword {
    color: v(documentation-api-code-keywords-text-color);
}

::ng-deep .docs-api-input-alias,
::ng-deep .docs-api-output-alias {
    color: v(documentation-api-code-alias-text-color);
}

// Docs headings
::ng-deep .docs-markdown--h4,
::ng-deep .docs-api-h4 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 400;
    margin: 16px 0;
}

::ng-deep .docs-markdown--h3,
::ng-deep .docs-api-h3 {
    font-size: 1.625rem;
    line-height: 2rem;
    font-weight: 400;
    margin-top: 32px;
    margin-bottom: 16px;
}

::ng-deep .component-api__header,
::ng-deep .component-examples__header,
::ng-deep .docs-markdown--h2,
::ng-deep .docs-api-h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 400;
    margin-bottom: 16px;
    margin-top: 0;
}

::ng-deep .docs-markdown--h2,
::ng-deep .docs-api-h2 {
    margin-top: 32px;
}

::ng-deep .component-overview__header,
::ng-deep .general-overview__header,
::ng-deep .docs-markdown--h1,
::ng-deep .docs-api-h1 {
    font-size: 2.5rem;
    line-height: 3rem;
    font-weight: 400;
    margin-top: 32px;
    margin-bottom: 16px;
}

::ng-deep ol {
    padding-left: 16px;

    .docs-markdown--li {
        list-style: decimal;
    }
}

::ng-deep pre {
    background: v(documentation-codeblock-background-color);
    padding: 16px;
    border-radius: 2px;
    display: inline-block;
    margin-top: 4px;
    margin-bottom: 16px;
    width: 100%;

    @media screen and (forced-colors: active) {
        border: 1px solid CanvasText;
    }
}

::ng-deep .docs-markdown--p code,
::ng-deep .docs-deprecation-warning code,
::ng-deep .docs-markdown--li > code,
::ng-deep .docs-markdown--table code {
    padding: 2px;
    margin: 0;
    background-color: v(documentation-markdown-code-background-color);
    border-radius: 4px;
}

::ng-deep p.docs-markdown--p {
    margin-top: 0;
}

::ng-deep .docs-markdown--h3:first-child,
::ng-deep .docs-markdown--h2:first-child,
::ng-deep .docs-markdown--h1:first-child {
    margin-top: 0;
}

::ng-deep .docs-api-method-card {
    border-width: 1px;
    border-style: solid;
    border-color: v(documentation-api-methodbox-border-color);
    width: 100%;
    border-radius: 4px;
    margin-bottom: 24px;
}

::ng-deep .docs-api-method-name {
    font-weight: 600;
    margin-bottom: 0;
}

::ng-deep .docs-api-method-card-header {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: v(documentation-api-methodbox-border-color);
    padding: 12px;
    background-color: v(documentation-api-methodbox-header-background-color);
}

::ng-deep .docs-api-method-description {
    padding: 12px;

    p {
        margin: 0;
    }

    p:not(:last-child) {
        margin-bottom: 8px;
    }
}

::ng-deep .docs-api-method-params,
::ng-deep .docs-api-method-returns {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: v(documentation-api-methodbox-border-color);
    padding: 12px;
}

::ng-deep .docs-api-method-returns p {
    margin-top: 0;
    margin-bottom: 0;
}

::ng-deep .docs-api-method-params .docs-api-parameter-container:not(:last-child) {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: v(documentation-api-methodbox-border-color);
    padding-bottom: 8px;
}

::ng-deep .docs-api-method-param-title,
::ng-deep .docs-api-method-returns-title {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 8px;
}

::ng-deep .docs-api-parameter-container {
    margin-top: 8px;
}

::ng-deep .docs-api-parameter-name {
    margin-top: 8px;
    display: block;
}

::ng-deep .docs-api-method-parameter-description {
    margin: 0;
}

// GRID EXAMPLE STYLES
// The grid styles are also added in projects/ng-aquila/documentation/assets/stack-blitz/src/styles.scss
// to make the grid examples work in Stackblitz.
.grid-tiers-example__container {
    height: 64px;
    width: 25%;
    text-align: center;
    position: relative;
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    justify-content: center;

    &.tier-tiny {
        background: v(documentation-grid-tiny-color);
    }

    &.tier-small {
        background: v(documentation-grid-small-color);
    }

    &.tier-medium {
        background: v(documentation-grid-medium-color);
    }

    &.tier-large {
        background: v(documentation-grid-large-color);
    }

    &.tier-xlarge {
        background: v(documentation-grid-xlarge-color);
    }

    &.tier-2xlarge {
        background: v(documentation-grid-2xlarge-color);
    }

    &.tier-3xlarge {
        background: v(documentation-grid-3xlarge-color);
    }
}

.grid-tiers-example__label {
    color: v(documentation-grid-text-color);
    font-weight: 600;
}

.grid-tiers-example__pixel-value {
    position: absolute;
    display: block;
    color: v(text-01);
    width: 64px;
    top: 64px;
    left: -32px;
}

.grid-component__current-grid-tier {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 1;
    color: v(documentation-grid-text-color);
    padding: 8px;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;

    @media only screen and (min-width: 0) and (max-width: 319px) {
        background-color: v(documentation-grid-tiny-color);
    }

    @media only screen and (min-width: 320px) and (max-width: 703px) {
        background-color: v(documentation-grid-small-color);
    }

    @media only screen and (min-width: 704px) and (max-width: 991px) {
        background-color: v(documentation-grid-medium-color);
    }

    @media only screen and (min-width: 992px) and (max-width: 1279px) {
        background-color: v(documentation-grid-large-color);
    }

    @media only screen and (min-width: 1280px) and (max-width: 1471px) {
        background-color: v(documentation-grid-xlarge-color);
    }

    @media only screen and (min-width: 1472px) and (max-width: 1759px) {
        background-color: v(documentation-grid-2xlarge-color);
    }

    @media only screen and (min-width: 1760px) {
        background-color: v(documentation-grid-3xlarge-color);
    }

    .current-grid__tier {
        display: none;
    }

    .current-grid__tier-tiny {
        @media only screen and (min-width: 0) and (max-width: 319px) {
            display: inline-block;
        }
    }

    .current-grid__tier-small {
        @media only screen and (min-width: 320px) and (max-width: 703px) {
            display: inline-block;
        }
    }

    .current-grid__tier-medium {
        @media only screen and (min-width: 704px) and (max-width: 991px) {
            display: inline-block;
        }
    }

    .current-grid__tier-large {
        @media only screen and (min-width: 992px) and (max-width: 1279px) {
            display: inline-block;
        }
    }

    .current-grid__tier-xlarge {
        @media only screen and (min-width: 1280px) and (max-width: 1471px) {
            display: inline-block;
        }
    }

    .current-grid__tier-2xlarge {
        @media only screen and (min-width: 1472px) and (max-width: 1759px) {
            display: inline-block;
        }
    }

    .current-grid__tier-3xlarge {
        @media only screen and (min-width: 1760px) {
            display: inline-block;
        }
    }

    @media screen and (forced-colors: active) {
        background-color: highlight;
        color: highlightText;
        forced-color-adjust: none;
    }
}

.grid-component__current-grid-tier-container {
    color: v(documentation-grid-text-color);
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    position: sticky;
    position: -webkit-sticky;
    top: 45px;
    z-index: 1;

    @container (min-width: 0) and (max-width: 319px) {
        background-color: cyan;
    }

    @container (min-width: 320px) and (max-width: 703px) {
        background-color: #b0050c;
    }

    @container (min-width: 704px) and (max-width: 991px) {
        background-color: olivedrab;
    }

    @container (min-width: 992px) and (max-width: 1279px) {
    }

    @container (min-width: 1280px) and (max-width: 1471px) {
        background-color: v(documentation-grid-xlarge-color);
    }

    @container (min-width: 1472px) and (max-width: 1759px) {
        background-color: v(documentation-grid-2xlarge-color);
    }

    @container (min-width: 1760px) {
        background-color: v(documentation-grid-3xlarge-color);
    }

    .current-grid__tier {
        padding: 8px;
        height: 100%;
        width: 100%;
        display: none;
    }

    .current-grid__tier-tiny {
        @container (min-width: 0) and (max-width: 319px) {
            background-color: v(documentation-grid-tiny-color);
            display: inline-block;
        }
    }

    .current-grid__tier-small {
        @container (min-width: 320px) and (max-width: 703px) {
            background-color: v(documentation-grid-small-color);
            display: inline-block;
        }
    }

    .current-grid__tier-medium {
        @container (min-width: 704px) and (max-width: 991px) {
            background-color: v(documentation-grid-medium-color);
            display: inline-block;
        }
    }

    .current-grid__tier-large {
        @container (min-width: 992px) and (max-width: 1279px) {
            background-color: v(documentation-grid-large-color);
            display: inline-block;
        }
    }

    .current-grid__tier-xlarge {
        @container (min-width: 1280px) and (max-width: 1471px) {
            display: inline-block;
        }
    }

    .current-grid__tier-2xlarge {
        @container (min-width: 1472px) and (max-width: 1759px) {
            display: inline-block;
        }
    }

    .current-grid__tier-3xlarge {
        @container (min-width: 1760px) {
            display: inline-block;
        }
    }

    //@media screen and (forced-colors: active) {
    //    background-color: highlight;
    //    color: highlightText;
    //    forced-color-adjust: none;
    //}
}

.docs-grid-colored-grid {
    @media only screen and (min-width: 0) and (max-width: 319px) {
        background-color: v(documentation-grid-tiny-color-02);
    }

    @media only screen and (min-width: 320px) and (max-width: 703px) {
        background-color: v(documentation-grid-small-color-02);
    }

    @media only screen and (min-width: 704px) and (max-width: 991px) {
        background-color: v(documentation-grid-medium-color-02);
    }

    @media only screen and (min-width: 992px) and (max-width: 1279px) {
        background-color: v(documentation-grid-large-color-02);
    }

    @media only screen and (min-width: 1280px) and (max-width: 1471px) {
        background-color: v(documentation-grid-xlarge-color-02);
    }

    @media only screen and (min-width: 1472px) and (max-width: 1759px) {
        background-color: v(documentation-grid-2xlarge-color-02);
    }

    @media only screen and (min-width: 1760px) {
        background-color: v(documentation-grid-3xlarge-color-02);
    }
}

.docs-grid-colored-col {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;

    @media only screen and (min-width: 0) and (max-width: 319px) {
        background-image: linear-gradient(to bottom, v(ui-01) 0%, v(ui-01) 100%),
            linear-gradient(to bottom, v(documentation-grid-tiny-color) 0%, v(documentation-grid-tiny-color) 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted v(documentation-grid-examples-dotted-border-color);
    }

    @media only screen and (min-width: 320px) and (max-width: 703px) {
        background-image: linear-gradient(to bottom, v(ui-01) 0%, v(ui-01) 100%),
            linear-gradient(to bottom, v(documentation-grid-small-color) 0%, v(documentation-grid-small-color) 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted v(documentation-grid-examples-dotted-border-color);
    }

    @media only screen and (min-width: 704px) and (max-width: 991px) {
        background-image: linear-gradient(to bottom, v(ui-01) 0%, v(ui-01) 100%),
            linear-gradient(to bottom, v(documentation-grid-medium-color) 0%, v(documentation-grid-medium-color) 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted v(documentation-grid-examples-dotted-border-color);
    }

    @media only screen and (min-width: 992px) and (max-width: 1279px) {
        background-image: linear-gradient(to bottom, v(ui-01) 0%, v(ui-01) 100%),
            linear-gradient(to bottom, v(documentation-grid-large-color) 0%, v(documentation-grid-large-color) 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted v(documentation-grid-examples-dotted-border-color);
    }

    @media only screen and (min-width: 1280px) and (max-width: 1471px) {
        background-image: linear-gradient(to bottom, v(ui-01) 0%, v(ui-01) 100%),
            linear-gradient(to bottom, v(documentation-grid-xlarge-color) 0%, v(documentation-grid-xlarge-color) 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted v(documentation-grid-examples-dotted-border-color);
    }

    @media only screen and (min-width: 1472px) and (max-width: 1759px) {
        background-image: linear-gradient(to bottom, v(ui-01) 0%, v(ui-01) 100%),
            linear-gradient(to bottom, v(documentation-grid-2xlarge-color) 0%, v(documentation-grid-2xlarge-color) 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted v(documentation-grid-examples-dotted-border-color);
    }

    @media only screen and (min-width: 1760px) {
        background-image: linear-gradient(to bottom, v(ui-01) 0%, v(ui-01) 100%),
            linear-gradient(to bottom, v(documentation-grid-3xlarge-color) 0%, v(documentation-grid-3xlarge-color) 100%);
        background-clip: content-box, padding-box;
        outline: 2px dotted v(documentation-grid-examples-dotted-border-color);
    }

    outline-offset: -1px;
}

.docs-grid-colored-offset {
    @media only screen and (min-width: 0) and (max-width: 319px) {
        background: linear-gradient(to right, v(documentation-grid-tiny-color-01) 50%, transparent 50%);
    }

    @media only screen and (min-width: 320px) and (max-width: 703px) {
        background: linear-gradient(to right, v(documentation-grid-small-color-01) 50%, transparent 50%);
    }

    @media only screen and (min-width: 704px) and (max-width: 991px) {
        background: linear-gradient(to right, v(documentation-grid-medium-color-01) 50%, transparent 50%);
    }

    @media only screen and (min-width: 992px) and (max-width: 1279px) {
        background: linear-gradient(to right, v(documentation-grid-large-color-01) 50%, transparent 50%);
    }

    @media only screen and (min-width: 1280px) and (max-width: 1471px) {
        background: linear-gradient(to right, v(documentation-grid-xlarge-color-01) 50%, transparent 50%);
    }

    @media only screen and (min-width: 1472px) and (max-width: 1759px) {
        background: linear-gradient(to right, v(documentation-grid-2xlarge-color-01) 50%, transparent 50%);
    }

    @media only screen and (min-width: 1760px) {
        background: linear-gradient(to right, v(documentation-grid-3xlarge-color-01) 50%, transparent 50%);
    }
}

.docs-grid-text-tiny {
    font-weight: 700;
    color: v(documentation-grid-tiny-color);
}

.docs-grid-text-small {
    font-weight: 700;
    color: v(documentation-grid-small-color);
}

.docs-grid-text-medium {
    font-weight: 700;
    color: v(documentation-grid-medium-color);
}

.docs-grid-text-large {
    font-weight: 700;
    color: v(documentation-grid-large-color);
}

.docs-grid-text-xlarge {
    font-weight: 700;
    color: v(documentation-grid-xlarge-color);
}

.docs-grid-text-2xlarge {
    font-weight: 700;
    color: v(documentation-grid-2xlarge-color);
}

.docs-grid-text-3xlarge {
    font-weight: 700;
    color: v(documentation-grid-3xlarge-color);
}

summary {
    color: v(accordion-extra-light-header-text-color);
    @include type-style(accordion-extra-light);
    cursor: pointer;
}
