{"version":3,"sourceRoot":"","sources":["../scss/stylus.scss","../scss/_font.scss","../scss/_button.scss","../scss/_card.scss","../scss/_empty.scss","../scss/_grid.scss","../scss/_helpers.scss","../scss/_icons.scss","../scss/_input.scss","../scss/_label.scss","../scss/_media_object.scss","../scss/_navigation.scss","../scss/_pagination.scss","../scss/_progress.scss","../scss/_tile.scss","../scss/_tooltip.scss"],"names":[],"mappings":"AAGA;EACI;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AC1CJ;EACI;EACA;EACA;EACA;EACA;EAIA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAIA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAIA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAIA;;ADEJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAUA;EAEI;EACA;;AAEJ;EACI;;AAEJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA,WA/GW;EAgHX;EACA;;AAEA;EANJ;IAOQ;;;;AEpHR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;;ACbR;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI;;;ACvCR;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAIA;EACI;;AAGJ;EACI;;;ACjBZ;EACI;EACA;;AAEA;EAJJ;IAKQ;;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;;;AC1BR;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AC9CJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACxDR;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;;;AAIR;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;;;ACvCR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EAEI;;AAGJ;EACI;;AAIA;EACI;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;;;ACnFhB;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;;;ACvCZ;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EAEI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAIR;EAhEJ;IAiEQ;;;;AAKJ;EACI;EACA;EACA;;AAEA;EALJ;IAMQ;IACA;IACA;;;AAIR;EACI;;AAEA;EAHJ;IAIQ;;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EAfJ;IAgBQ;IACA;;;;AAMR;EADJ;IAEQ;IACA;;;;AAKJ;EADJ;IAEQ;IACA;;;;AC1HR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EAEI;;AAIR;EACI;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;;;AChEZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;;ACjBR;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EAGI;;AAGJ;EAGI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;;ACnCZ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA","file":"stylus.css","sourcesContent":["$display__max: 102.4rem;\r\n$display__max--pixel: 1024px;\r\n\r\n:root {\r\n    --var-base: 230;\r\n\r\n    --var-blue: 200;\r\n    --var-green: 110;\r\n    --var-purple: 262;\r\n    --var-red: 12;\r\n    --var-yellow: 50;\r\n\r\n    --color-white-100: hsl(var(--var-base), 10%, 50%);\r\n    --color-white-200: hsl(var(--var-base), 10%, 60%);\r\n    --color-white-300: hsl(var(--var-base), 10%, 70%);\r\n    --color-white-400: hsl(var(--var-base), 10%, 80%);\r\n    --color-white-500: hsl(var(--var-base), 10%, 90%);\r\n\r\n    --color-gray-100: hsl(var(--var-base), 10%, 10%);\r\n    --color-gray-200: hsl(var(--var-base), 10%, 15%);\r\n    --color-gray-300: hsl(var(--var-base), 10%, 20%);\r\n    --color-gray-400: hsl(var(--var-base), 10%, 25%);\r\n    --color-gray-500: hsl(var(--var-base), 10%, 30%);\r\n\r\n    --color-blue-100: hsl(var(--var-blue), 50%, 50%);\r\n    --color-blue-200: hsl(var(--var-blue), 50%, 60%);\r\n    --color-blue-300: hsl(var(--var-blue), 50%, 70%);\r\n\r\n    --color-green-100: hsl(var(--var-green), 40%, 45%);\r\n    --color-green-200: hsl(var(--var-green), 40%, 55%);\r\n    --color-green-300: hsl(var(--var-green), 40%, 65%);\r\n\r\n    --color-purple-100: hsl(var(--var-purple), 25%, 60%);\r\n    --color-purple-200: hsl(var(--var-purple), 25%, 70%);\r\n    --color-purple-300: hsl(var(--var-purple), 25%, 80%);\r\n\r\n    --color-red-100: hsl(var(--var-red), 60%, 60%);\r\n    --color-red-200: hsl(var(--var-red), 60%, 70%);\r\n    --color-red-300: hsl(var(--var-red), 60%, 80%);\r\n\r\n    --color-yellow-100: hsl(var(--var-yellow), 50%, 60%);\r\n    --color-yellow-200: hsl(var(--var-yellow), 50%, 65%);\r\n    --color-yellow-300: hsl(var(--var-yellow), 50%, 70%);\r\n}\r\n\r\n@import \"font\";\r\n\r\n* {\r\n    box-sizing: border-box;\r\n}\r\n\r\nhtml {\r\n    font-size: 62.5%;\r\n}\r\n\r\nbody {\r\n    align-items: center;\r\n    background: var(--color-gray-100);\r\n    color: var(--color-white-300);\r\n    display: flex;\r\n    line-height: 1.2rem;\r\n    font-family: \"Noto Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\r\n    font-size: 1.4rem;\r\n    justify-content: center;\r\n    margin: 0;\r\n    min-height: 90vh;\r\n    padding: 0;\r\n}\r\n\r\n// body :not(.exclude) {\r\n//     -webkit-filter: grayscale(100%);\r\n//     -moz-filter: grayscale(100%);\r\n//     filter: grayscale(100%);\r\n// }\r\n\r\na {\r\n    &:link,\r\n    &:visited {\r\n        text-decoration: none;\r\n        color: var(--color-blue-300);\r\n    }\r\n    &:hover {\r\n        text-decoration: underline;\r\n    }\r\n    &:active {\r\n        color: var(--color-blue-200);\r\n    }\r\n}\r\n\r\nhr {\r\n    background: var(--color-gray-300);\r\n    border: none;\r\n    box-shadow: none;\r\n    height: 0.1rem;\r\n    margin: 1rem 0;\r\n}\r\n\r\nmain {\r\n    background: var(--color-gray-200);\r\n    padding: 0.5rem 1rem;\r\n    min-width: 25rem;\r\n}\r\n\r\np {\r\n    font-size: 1.3rem;\r\n    line-height: 1.8rem;\r\n    margin: 1rem 0;\r\n}\r\n\r\n#container {\r\n    margin: auto;\r\n    max-width: $display__max;\r\n    min-width: 20rem;\r\n    padding: 0;\r\n\r\n    @media all and (min-width: $display__max--pixel) {\r\n        padding: 1rem 0;\r\n    }\r\n}\r\n\r\n@import \"button\";\r\n@import \"card\";\r\n@import \"empty\";\r\n@import \"grid\";\r\n@import \"helpers\";\r\n@import \"icons\";\r\n@import \"input\";\r\n@import \"label\";\r\n@import \"media_object\";\r\n@import \"navigation\";\r\n@import \"pagination\";\r\n@import \"progress\";\r\n@import \"tile\";\r\n@import \"tooltip\";\r\n","@font-face {\r\n    font-display: swap;\r\n    font-family: \"Noto Sans\";\r\n    font-style: normal;\r\n    font-weight: 400;\r\n    src: local(\"Noto Sans\"), local(\"NotoSans\"),\r\n        url(\"/fonts/noto-sans-regular.woff2\") format(\"woff2\"),\r\n        url(\"/fonts/noto-sans-regular.woff\") format(\"woff\"),\r\n        url(\"/fonts/noto-sans-regular.ttf\") format(\"truetype\");\r\n    unicode-range: U+000-5FF;\r\n}\r\n\r\n@font-face {\r\n    font-display: swap;\r\n    font-family: \"Noto Sans\";\r\n    font-style: italic;\r\n    font-weight: 400;\r\n    src: local(\"Noto Sans Italic\"), local(\"NotoSans-Italic\"),\r\n        url(\"/fonts/noto-sans-italic.woff2\") format(\"woff2\"),\r\n        url(\"/fonts/noto-sans-italic.woff\") format(\"woff\"),\r\n        url(\"/fonts/noto-sans-italic.ttf\") format(\"truetype\");\r\n    unicode-range: U+000-5FF;\r\n}\r\n\r\n@font-face {\r\n    font-display: swap;\r\n    font-family: \"Noto Sans\";\r\n    font-style: normal;\r\n    font-weight: 700;\r\n    src: local(\"Noto Sans Bold\"), local(\"NotoSans-Bold\"),\r\n        url(\"/fonts/noto-sans-bold.woff2\") format(\"woff2\"),\r\n        url(\"/fonts/noto-sans-bold.woff\") format(\"woff\"),\r\n        url(\"/fonts/noto-sans-bold.ttf\") format(\"truetype\");\r\n    unicode-range: U+000-5FF;\r\n}\r\n\r\n@font-face {\r\n    font-display: swap;\r\n    font-family: \"Noto Sans\";\r\n    font-style: italic;\r\n    font-weight: 700;\r\n    src: local(\"Noto Sans Bold Italic\"), local(\"NotoSans-BoldItalic\"),\r\n        url(\"/fonts/noto-sans-bold-italic.woff2\") format(\"woff2\"),\r\n        url(\"/fonts/noto-sans-bold-italic.woff\") format(\"woff\"),\r\n        url(\"/fonts/noto-sans-bold-italic.ttf\") format(\"truetype\");\r\n    unicode-range: U+000-5FF;\r\n}\r\n",".button {\r\n    background: var(--color-gray-500);\r\n    border: none;\r\n    border-radius: 0.2rem;\r\n    color: var(--color-white-500);\r\n    cursor: pointer;\r\n    display: inline-block;\r\n    font-size: 1.2rem;\r\n    margin: 0 0.5rem 0 0;\r\n    outline: 0;\r\n    padding: 0.5rem 1rem;\r\n\r\n    &:hover {\r\n        background: var(--color-gray-400);\r\n    }\r\n}\r\n",".card {\r\n    display: block;\r\n    margin: 1rem 0;\r\n    position: relative;\r\n    width: 100%;\r\n\r\n    & &__title {\r\n        display: flex;\r\n    }\r\n\r\n    & &__summary {\r\n        color: var(--color-white-300);\r\n        margin: 0 0 0.5rem 0;\r\n    }\r\n\r\n    & &__footer {\r\n        display: flex;\r\n    }\r\n\r\n    & &__meta {\r\n        color: var(--color-white-200);\r\n        display: flex;\r\n        margin: 0 0 0.5rem 0;\r\n\r\n        &--left {\r\n            flex: 1 0 auto;\r\n            font-size: 1.2rem;\r\n            margin: 0;\r\n        }\r\n\r\n        &--right {\r\n            flex: 1 0 auto;\r\n            font-size: 1.2rem;\r\n            margin: 0;\r\n            text-align: right;\r\n        }\r\n    }\r\n    \r\n    & &__progress {\r\n        margin: 0.5rem 0;\r\n    }\r\n}\r\n",".empty {\r\n    padding: 5rem;\r\n    text-align: center;\r\n\r\n    & &__icon {\r\n        align-items: center;\r\n        display: flex;\r\n        justify-content: center;\r\n        margin-top: 1rem;\r\n    }\r\n\r\n    & &__title {\r\n        &--sup {\r\n            font-size: 1.5rem;\r\n        }\r\n\r\n        &--sub {\r\n            font-size: 1.3rem;\r\n        }\r\n    }\r\n}\r\n",".grid {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n\r\n    @media (max-width: $display__max--pixel) {\r\n        display: block;\r\n    }\r\n\r\n    .column {\r\n        flex: 1;\r\n        padding: 0.5rem;\r\n\r\n        &.large {\r\n            min-width: 15rem;\r\n        }\r\n    }\r\n\r\n    &.halves .column  {\r\n        flex: 0 0 50%;\r\n    }\r\n\r\n    &.thirds .column  {\r\n        flex: 0 0 33.3333%;\r\n    }\r\n\r\n    &.fourths .column {\r\n        flex: 0 0 25%;\r\n    }\r\n}\r\n",".background--blue {\r\n    background-color: var(--color-blue-200);\r\n}\r\n\r\n.background--gray {\r\n    background-color: var(--color-white-300);\r\n}\r\n\r\n.background--green {\r\n    background-color: var(--color-green-200);\r\n}\r\n\r\n.background--purple {\r\n    background-color: var(--color-purple-200);\r\n}\r\n\r\n.background--red {\r\n    background-color: var(--color-red-200);\r\n}\r\n\r\n.background--yellow {\r\n    background-color: var(--color-yellow-300);\r\n}\r\n\r\n.hidden {\r\n    left: -10000px;\r\n    height: 1px;\r\n    max-height: 0.1rem;\r\n    max-width: 0.1rem;\r\n    min-height: 0;\r\n    min-width: 0;\r\n    overflow: hidden;\r\n    position: absolute;\r\n    top: auto;\r\n    width: 1px;\r\n}\r\n\r\n.center-contents--column {\r\n    align-items: center;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.center-contents--row {\r\n    align-items: center;\r\n    display: flex;\r\n    flex-direction: row;\r\n}\r\n",".icon--danger {\r\n    box-sizing: border-box;\r\n    position: relative;\r\n    display: block;\r\n    transform: scale(var(--icon, 1));\r\n    width: 2rem;\r\n    height: 2rem;\r\n    border: 0.2rem solid;\r\n    border-radius: 4rem;\r\n\r\n    &::after,\r\n    &::before {\r\n        content: \"\";\r\n        display: block;\r\n        box-sizing: border-box;\r\n        position: absolute;\r\n        border-radius: 0.3rem;\r\n        width: 0.2rem;\r\n        background: currentColor;\r\n        left: 0.7rem;\r\n    }\r\n\r\n    &::after {\r\n        top: 0.2rem;\r\n        height: 0.8rem;\r\n    }\r\n\r\n    &::before {\r\n        height: 0.2rem;\r\n        bottom: 0.2rem;\r\n    }\r\n}\r\n\r\n.icon--search {\r\n    box-sizing: border-box;\r\n    position: relative;\r\n    display: block;\r\n    transform: scale(var(--icon, 1));\r\n    width: 1.6rem;\r\n    height: 1.6rem;\r\n    border: 0.2rem solid;\r\n    border-radius: 100%;\r\n    margin-left: -0.4rem;;\r\n    margin-top: -0.4rem;\r\n\r\n    &::after {\r\n        content: \"\";\r\n        display: block;\r\n        box-sizing: border-box;\r\n        position: absolute;\r\n        border-radius: 0.3rem;\r\n        width: 0.2rem;\r\n        height: 0.8rem;\r\n        background: currentColor;\r\n        transform: rotate(-45deg);\r\n        top: 1rem;\r\n        left: 1.2rem;\r\n    }\r\n}\r\n","label {\r\n    display: block;\r\n    font-size:  1.2rem;\r\n    margin-bottom: 0.5rem;\r\n    margin-top: 0.5rem;\r\n}\r\n\r\ninput {\r\n    background: var(--color-gray-500);\r\n    border: none;\r\n    border-radius: 0.2rem;\r\n    color: var(--color-white-500);\r\n    display: block;\r\n    line-height: 1.6rem;\r\n    margin-bottom: 1rem;\r\n    min-width: 10rem;\r\n    max-width: 35rem;\r\n    padding: 0.5rem 0.8rem;\r\n    width: 100%;\r\n\r\n    &:hover,\r\n    &:focus {\r\n        background: var(--color-gray-400);\r\n    }\r\n}\r\n\r\ntextarea {\r\n    \r\n    background: var(--color-gray-500);\r\n    border: none;\r\n    border-radius: 0.2rem;\r\n    color: var(--color-white-500);\r\n    display: block;\r\n    line-height: 1.6rem;\r\n    margin-bottom: 1rem;\r\n    padding: 0.5rem 0.8rem;\r\n\r\n    &:hover,\r\n    &:focus {\r\n        background: var(--color-gray-400);\r\n    }\r\n}\r\n",".label {\r\n    border-radius: 0.2rem;\r\n    color: var(--color-gray-100);\r\n    display: inline-block;\r\n    font-size: 1.2rem;\r\n    margin: 0 0.5rem 0.5rem 0;\r\n    padding: 0.5rem 1rem;\r\n\r\n    & &__detail {\r\n        background: rgba(0, 0, 0, 0.2);\r\n        display: inline-block;\r\n        margin: -0.5rem -1rem -0.5rem 0.5rem;\r\n        opacity: 0.8;\r\n        padding: 0.5rem 1rem;\r\n    }\r\n\r\n    &__list {\r\n        display: flex;\r\n        flex-wrap: wrap;\r\n        font-size: 0;\r\n        list-style: none;\r\n        padding: 0;\r\n    }\r\n\r\n    &__list &, &__list li {\r\n        display: inline-flex;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    &:link,\r\n    &:visited {\r\n        color: var(--color-gray-100);\r\n    }\r\n\r\n    &:hover {\r\n        cursor: pointer;\r\n    }\r\n\r\n    &.color {\r\n        &__blue {\r\n            background: var(--color-blue-200);\r\n\r\n            &:hover {\r\n                background: var(--color-blue-100);\r\n            }\r\n        }\r\n\r\n        &__green {\r\n            background: var(--color-green-200);\r\n\r\n            &:hover {\r\n                background: var(--color-green-100);\r\n            }\r\n        }\r\n\r\n        &__purple {\r\n            background: var(--color-purple-200);\r\n\r\n            &:hover {\r\n                background: var(--color-purple-100);\r\n            }\r\n        }\r\n\r\n        &__red {\r\n            background: var(--color-red-200);\r\n\r\n            &:hover {\r\n                background: var(--color-red-100);\r\n            }\r\n        }\r\n\r\n        &__silver {\r\n            background: var(--color-white-300);\r\n\r\n            &:hover {\r\n                background: var(--color-white-200);\r\n            }\r\n        }\r\n\r\n        &__yellow {\r\n            background: var(--color-yellow-300);\r\n\r\n            &:hover {\r\n                background: var(--color-yellow-200);\r\n            }\r\n        }\r\n    }\r\n}\r\n",".media-object {\r\n    display: flex;\r\n    flex-direction: row;\r\n    flex-wrap: nowrap;\r\n    width: 100%;\r\n\r\n    & &__left {\r\n        display: inline-block;\r\n        margin-right: 0.5rem;\r\n    }\r\n\r\n    & &__title {\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n\r\n        &--sup {\r\n            display: block;\r\n            font-size: 1.5rem;\r\n            font-style: normal;\r\n            font-weight: bold;\r\n            line-height: 1.8rem;\r\n            margin: 0 0 0.4rem 0;\r\n        }\r\n\r\n        &--sub {\r\n            display: block;\r\n            font-size: 1.3rem;\r\n            margin: 0 0 0.2rem 0;\r\n        }\r\n    }\r\n\r\n    & &__meta {\r\n        font-size: 1.2rem;\r\n        line-height: 1.8rem;\r\n        margin: 0.2rem 0 0 0;\r\n\r\n        &--text {\r\n            color: var(--color-white-200);\r\n            white-space: nowrap;\r\n        }\r\n    }\r\n}\r\n",".nav {\r\n    background: var(--color-gray-300);\r\n    color: var(--color-white-500);\r\n    display: flex;\r\n\r\n    * {\r\n        flex: 0 0 auto;\r\n    }\r\n\r\n    a {\r\n        color: var(--color-white-300);\r\n        display: inline-block;\r\n        font-size: 1.3rem;\r\n        line-height: 3.4rem;\r\n        padding: 0 1rem;\r\n\r\n        &:link,\r\n        &:visited {\r\n            text-decoration: none;\r\n            color: var(--color-white-500);\r\n        }\r\n\r\n        &:hover {\r\n            text-decoration: underline;\r\n        }\r\n\r\n        &:active {\r\n            color: var(--color-white-500);\r\n        }\r\n    }\r\n\r\n    & &__brand {\r\n        font-weight: bold;\r\n        margin: 0;\r\n        padding: 0;\r\n    }\r\n\r\n    & &__left {\r\n        display: inline-flex;\r\n        flex-grow: 1;\r\n        list-style: none;\r\n        margin: 0;\r\n        overflow-y: auto;\r\n        padding: 0;\r\n        white-space: nowrap;\r\n    }\r\n\r\n    & &__right {\r\n        display: inline-flex;\r\n        list-style: none;\r\n        margin: 0;\r\n        padding: 0;\r\n    }\r\n\r\n    & &__item {\r\n        font-size: 1.2rem;\r\n        font-weight: normal;\r\n        padding: 0 0.8rem;\r\n\r\n        a {\r\n            padding: 0;\r\n        }\r\n    }\r\n\r\n    @media all and (max-width: $display__max--pixel) {\r\n        flex-wrap: wrap;\r\n    }\r\n}\r\n\r\n.nav--search {\r\n    & .nav__left {\r\n        flex-grow: 0;\r\n        order: 4;\r\n        width: 100%;\r\n\r\n        @media all and (min-width: $display__max--pixel) {\r\n            flex-grow: 1;\r\n            order: 2;\r\n            width: auto;\r\n        }\r\n    }\r\n\r\n    & .nav__right {\r\n        order: 3;\r\n\r\n        @media all and (min-width: $display__max--pixel) {\r\n            order: 4;\r\n        }\r\n    }\r\n\r\n    & .nav__search {\r\n        display: inline-flex;\r\n        flex-grow: 9999;\r\n        order: 2;\r\n        padding: 0;\r\n\r\n        input {\r\n            flex: 1 0 auto;\r\n            font-size: 1.2rem;\r\n            line-height: 3.4rem;\r\n            margin: 0;\r\n            max-width: none;\r\n            padding: 0 1.4rem;\r\n        }\r\n\r\n        @media all and (min-width: $display__max--pixel) {\r\n            order: 3;\r\n            padding: 0 0.8rem;\r\n        }\r\n    }\r\n}\r\n\r\nnav.nav {\r\n    @media all and (min-width: $display__max--pixel) {\r\n        border-top-left-radius: 0.2rem;\r\n        border-top-right-radius: 0.2rem;\r\n    }\r\n}\r\n\r\nfooter.nav {\r\n    @media all and (min-width: $display__max--pixel) {\r\n        border-bottom-left-radius: 0.2rem;\r\n        border-bottom-right-radius: 0.2rem;\r\n    }\r\n}\r\n",".pagination {\r\n    font-size: 0;\r\n    list-style: none;\r\n    margin: 0 auto;\r\n    padding: 0;\r\n    text-align: center;\r\n\r\n    &__item {\r\n        display: inline-block;\r\n\r\n        * {\r\n            background: var(--color-gray-500);\r\n            border: none;\r\n            border-left: 0.1rem solid var(--color-gray-200);\r\n            color: var(--color-white-500);\r\n            display: inline-block;\r\n            font-size: 1.2rem;\r\n            line-height: 1.8rem;\r\n            margin: 0 0 0 0;\r\n            outline: 0;\r\n            padding: 0.5rem 1rem;\r\n        }\r\n\r\n        a {\r\n            &:link,\r\n            &:visited {\r\n                color: var(--color-white-500);\r\n            }\r\n        }\r\n\r\n        p {\r\n            background: var(--color-gray-400);\r\n            cursor: default;\r\n            pointer-events: none;\r\n        }\r\n\r\n        &:first-child * {\r\n            border-top-left-radius: 0.2rem;\r\n            border-bottom-left-radius: 0.2rem;\r\n        }\r\n\r\n        &:last-child * {\r\n            border-top-right-radius: 0.2rem;\r\n            border-bottom-right-radius: 0.2rem;\r\n        }\r\n\r\n        &:hover {\r\n            * {\r\n                background: var(--color-gray-400);\r\n            }\r\n\r\n            p {\r\n                background: var(--color-gray-400);\r\n            }\r\n        }\r\n\r\n        &--disabled * {\r\n            background: var(--color-gray-300);\r\n            color: var(--color-white-400);\r\n            cursor: default;\r\n            pointer-events: none;\r\n        }\r\n\r\n        &--disabled:hover * {\r\n            background: var(--color-gray-300);\r\n        }\r\n    }\r\n}","progress {\r\n    -webkit-appearance: none;\r\n    -moz-appearance: none;\r\n    appearance: none;\r\n    background: var(--color-gray-300);\r\n    border: none;\r\n    box-shadow: none;\r\n    color: var(--color-blue-200);\r\n    height: 0.2rem;\r\n    margin: 1rem 0;\r\n    width: 100%;\r\n\r\n    &::-webkit-progress-bar {\r\n        background: var(--color-gray-300);\r\n    }\r\n\r\n    &::-moz-progress-bar, &::-webkit-progress-value {\r\n        background: var(--color-blue-200);\r\n    }\r\n}\r\n",".tiles {\r\n    display: block;\r\n    height: 3.6rem;\r\n    min-width: 3.6rem;\r\n    margin: 0.2rem;\r\n    position: relative;\r\n    width: 3.6rem;\r\n\r\n    .tile {\r\n        border-radius: 0.2rem;\r\n        height: 1.6rem;\r\n        position: absolute;\r\n        width: 1.6rem;\r\n\r\n        &__top {\r\n            @extend .tile;\r\n\r\n            top: 0;\r\n        }\r\n\r\n        &__bottom {\r\n            @extend .tile;\r\n\r\n            bottom: 0;\r\n        }\r\n\r\n        &__center {\r\n            left: 1rem;\r\n        }\r\n\r\n        &__left {\r\n            left: 0;\r\n        }\r\n\r\n        &__right {\r\n            right: 0;\r\n        }\r\n    }\r\n}","[aria-label] {\r\n    cursor: pointer;\r\n    position: relative;\r\n\r\n    &:before {\r\n        background: var(--color-white-500);\r\n        border-radius: 0.2rem;\r\n        bottom: 100%;\r\n        color: var(--color-gray-100);\r\n        content: attr(aria-label);\r\n        left: 50%;\r\n        margin-bottom: 1rem;\r\n        max-width: 15rem;\r\n        min-width: 6rem;\r\n        opacity: 0;\r\n        padding: 0.5rem 1rem;\r\n        pointer-events: none;\r\n        position: absolute;\r\n        transform: translate(-50%, 0.4rem);\r\n        transform-origin: top;\r\n        transition: all .18s ease-out .18s;\r\n        text-align: center;\r\n        text-indent: 0;\r\n        text-shadow: none;\r\n        font-size: 1.2rem;\r\n        font-style: normal;\r\n        font-weight: normal;\r\n        white-space: normal;\r\n        word-wrap: break-word;\r\n        z-index: 10;\r\n    }\r\n\r\n    &:hover:before {\r\n        opacity: 1;\r\n        pointer-events: none;\r\n        transform: translate(-50%, 0);\r\n    }\r\n}\r\n"]}