@import 'variables';
@import '../../node_modules/@oceanprotocol/typographies/sass/ocean-typo.scss';

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

/* stylelint-disable selector-max-id */
html,
body,
#root {
    height: 100%;
}

/* stylelint-enable selector-max-id */

html {
    font-size: $font-size-root;
}

body {
    color: $brand-grey-light;
    font-size: $font-size-base;
    font-family: $font-family-base;
    font-weight: $font-weight-base;
    line-height: $line-height;
    background: $body-background;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    margin: 0;

    @media screen and (min-width: $break-point--small) {
        padding: $page-frame;
    }
}

a {
    text-decoration: none;
    color: $brand-pink;
    transition: .2s ease-out;

    &:hover,
    &:focus {
        color: darken($brand-pink, 15%);
        text-decoration: none;
        transform: translate3d(0, -.1rem, 0);
    }

    &:active {
        color: darken($brand-pink, 15%);
        text-decoration: none;
        transform: none;
        transition: none;
    }
}

p {
    margin: 0;
    margin-bottom: $spacer / $line-height;
}

// Lists
/////////////////////////////////////

ul {
    li {
        &:before {
            content: ' \25AA'; // Black Small Square: ▪ ▪
            top: -2px;
        }
    }
}

ol {
    counter-reset: ol-counter;

    li {
        &:before {
            content: counter(ol-counter) '.';
            counter-increment: ol-counter;
            font-weight: $font-weight-bold;
            top: -1px;
        }
    }

    ul li:before {
        content: ' \25AA';
    }
}

ul,
ol {
    margin-top: 0;
    margin-bottom: $spacer;
    padding-left: $spacer / $line-height;
    list-style: none;

    li {
        position: relative;
        display: block;

        &:before {
            position: absolute;
            left: -($spacer / $line-height);
            color: $brand-grey-light;
            user-select: none;
        }

        + li {
            margin-top: $spacer / 8;
        }

        ul,
        ol,
        p {
            margin-bottom: 0;
            margin-top: $spacer / 8;
        }
    }
}

// Inline typography
/////////////////////////////////////

b,
strong,
.bold {
    font-weight: $font-weight-bold;
}

em,
.italic {
    font-style: italic;
}

small {
    font-size: $font-size-small;
    display: inline-block;
}

abbr[title],
dfn {
    text-transform: none;
    font-style: normal;
    font-size: inherit;
    border-bottom: 1px dashed $brand-grey-light;
    cursor: help;
    font-feature-settings: inherit;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: $font-family-title;
    color: inherit;
    line-height: 1.2;
    font-weight: $font-weight-bold;
}

h1 {
    font-size: $font-size-h1;
}

h2 {
    font-size: $font-size-h2;
}

h3 {
    font-size: $font-size-h3;
}

h4 {
    font-size: $font-size-h4;
}

h5 {
    font-size: $font-size-h5;
}

// Responsive Media
/////////////////////////////////////

figure,
img,
svg,
video,
audio,
embed,
canvas,
picture {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
}

hr {
    margin: $spacer 0;
    border: 0;
    border-bottom: .1rem solid $brand-grey-lighter;
}

// Quotes
/////////////////////////////////////

q {
    font-style: italic;
}

cite {
    font-style: normal;
    text-transform: uppercase;
}

blockquote,
blockquote > p {
    font-style: italic;
    color: lighten($brand-grey, 15%);
}

blockquote {
    margin: 0 0 $spacer;
    padding-left: $spacer / 2;
    border-left: .2rem solid $brand-grey-lighter;

    @media screen and (min-width: $break-point--small) {
        padding-left: $spacer / $line-height;
    }
}

// Tables
/////////////////////////////////////

table {
    width: 100%;
    margin-bottom: $spacer * $line-height;
    border-collapse: collapse;

    th,
    td {
        border: 0;
        margin: 0;
        padding: $spacer / 2;
        border-bottom: 1px solid $brand-grey-lighter;
        text-align: left;
        font-size: 90%;

        &[align='center'] {
            text-align: center;
        }

        &[align='right'] {
            text-align: right;
        }
    }

    th {
        font-weight: 600;
    }
}

// Code
/////////////////////////////////////

code,
kbd,
pre,
samp {
    font-family: $font-family-monospace;
    font-size: $font-size-small;
    border-radius: $border-radius;
    text-shadow: none;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;

    h1 &,
    h2 &,
    h3 &,
    h4 &,
    h5 & {
        font-size: inherit;
    }
}

:not(pre) > code {
    color: inherit;
    display: inline-block;
}

a > code {
    color: $brand-pink;
}

pre {
    display: block;
    margin-bottom: $spacer;
    padding: 0;
    background: lighten($brand-grey-lighter, 5%);

    // make 'em scrollable
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    code {
        padding: $spacer;
        white-space: pre;
        display: block;
        color: $brand-grey-lighter;
        overflow-wrap: normal;
        word-wrap: normal;
        word-break: normal;
        overflow: auto;
    }
}

// Selection
/////////////////////////////////////

::-moz-selection {
    background: $brand-grey-light;
    color: #fff;
}

::selection {
    background: $brand-grey-light;
    color: #fff;
}