{"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,MACI,gBAEA,gBACA,iBACA,kBACA,cACA,iBAEA,kDACA,kDACA,kDACA,kDACA,kDAEA,iDACA,iDACA,iDACA,iDACA,iDAEA,iDACA,iDACA,iDAEA,mDACA,mDACA,mDAEA,qDACA,qDACA,qDAEA,+CACA,+CACA,+CAEA,qDACA,qDACA,qDC1CJ,WACI,kBACA,wBACA,kBACA,gBACA,0MAIA,wBAGJ,WACI,kBACA,wBACA,kBACA,gBACA,qNAIA,wBAGJ,WACI,kBACA,wBACA,kBACA,gBACA,2MAIA,wBAGJ,WACI,kBACA,wBACA,kBACA,gBACA,6OAIA,wBDEJ,EACI,sBAGJ,KACI,gBAGJ,KACI,mBACA,iCACA,6BACA,aACA,mBACA,gKACA,iBACA,uBACA,SACA,gBACA,UAUA,iBAEI,qBACA,4BAEJ,QACI,0BAEJ,SACI,4BAIR,GACI,iCACA,YACA,gBACA,aACA,cAGJ,KACI,iCACA,mBACA,gBAGJ,EACI,iBACA,mBACA,cAGJ,WACI,YACA,UA/GW,SAgHX,gBACA,UAEA,mCANJ,WAOQ,gBEpHR,QACI,iCACA,YACA,oBACA,6BACA,eACA,qBACA,iBACA,mBACA,UACA,mBAEA,cACI,iCCbR,MACI,cACA,cACA,kBACA,WAEA,mBACI,aAGJ,qBACI,6BACA,mBAGJ,oBACI,aAGJ,kBACI,6BACA,aACA,mBAEA,wBACI,cACA,iBACA,SAGJ,yBACI,cACA,iBACA,SACA,iBAIR,sBACI,eCvCR,OACI,aACA,kBAEA,oBACI,mBACA,aACA,uBACA,gBAIA,0BACI,iBAGJ,0BACI,iBCjBZ,MACI,aACA,eAEA,0BAJJ,MAKQ,eAGJ,cACI,OACA,cAEA,oBACI,gBAIR,qBACI,aAGJ,qBACI,kBAGJ,sBACI,aC1BR,kBACI,uCAGJ,kBACI,wCAGJ,mBACI,wCAGJ,oBACI,yCAGJ,iBACI,sCAGJ,oBACI,yCAGJ,QACI,cACA,WACA,iBACA,gBACA,aACA,YACA,gBACA,kBACA,SACA,UAGJ,yBACI,mBACA,aACA,sBAGJ,sBACI,mBACA,aACA,mBC9CJ,cACI,sBACA,kBACA,cACA,gCACA,WACA,YACA,mBACA,mBAEA,2CAEI,WACA,cACA,sBACA,kBACA,oBACA,YACA,wBACA,WAGJ,qBACI,UACA,aAGJ,sBACI,aACA,aAIR,cACI,sBACA,kBACA,cACA,gCACA,aACA,cACA,mBACA,mBACA,oBACA,mBAEA,qBACI,WACA,cACA,sBACA,kBACA,oBACA,YACA,aACA,wBACA,yBACA,SACA,YCxDR,MACI,cACA,iBACA,oBACA,iBAGJ,MACI,iCACA,YACA,oBACA,6BACA,cACA,mBACA,mBACA,gBACA,gBACA,oBACA,WAEA,wBAEI,iCAIR,SAEI,iCACA,YACA,oBACA,6BACA,cACA,mBACA,mBACA,oBAEA,8BAEI,iCCvCR,OACI,oBACA,4BACA,qBACA,iBACA,uBACA,mBAEA,sBACI,0BACA,qBACA,mCACA,WACA,mBAGJ,aACI,aACA,eACA,YACA,gBACA,UAGJ,oCACI,oBACA,eAGJ,2BAEI,4BAGJ,aACI,eAIA,mBACI,iCAEA,yBACI,iCAIR,oBACI,kCAEA,0BACI,kCAIR,qBACI,mCAEA,2BACI,mCAIR,kBACI,gCAEA,wBACI,gCAIR,qBACI,kCAEA,2BACI,kCAIR,qBACI,mCAEA,2BACI,mCCnFhB,cACI,aACA,mBACA,iBACA,WAEA,kCACI,qBACA,mBAGJ,mCACI,aACA,sBACA,YAEA,wCACI,cACA,iBACA,kBACA,iBACA,mBACA,mBAGJ,wCACI,cACA,iBACA,mBAIR,kCACI,iBACA,mBACA,mBAEA,wCACI,6BACA,mBCvCZ,KACI,iCACA,6BACA,aAEA,OACI,cAGJ,OACI,6BACA,qBACA,iBACA,mBACA,eAEA,2BAEI,qBACA,6BAGJ,aACI,0BAGJ,cACI,6BAIR,iBACI,iBACA,SACA,UAGJ,gBACI,oBACA,YACA,gBACA,SACA,gBACA,UACA,mBAGJ,iBACI,oBACA,gBACA,SACA,UAGJ,gBACI,iBACA,mBACA,gBAEA,kBACI,UAIR,mCAhEJ,KAiEQ,gBAKJ,wBACI,YACA,QACA,WAEA,mCALJ,wBAMQ,YACA,QACA,YAIR,yBACI,QAEA,mCAHJ,yBAIQ,SAIR,0BACI,oBACA,eACA,QACA,UAEA,gCACI,cACA,iBACA,mBACA,SACA,eACA,iBAGJ,mCAfJ,0BAgBQ,QACA,iBAMR,mCADJ,QAEQ,6BACA,+BAKJ,mCADJ,WAEQ,gCACA,kCC1HR,YACI,YACA,gBACA,cACA,UACA,kBAEA,kBACI,qBAEA,oBACI,iCACA,YACA,8CACA,6BACA,qBACA,iBACA,mBACA,eACA,UACA,mBAIA,qDAEI,6BAIR,oBACI,iCACA,eACA,oBAGJ,gCACI,6BACA,gCAGJ,+BACI,8BACA,iCAIA,0BACI,iCAGJ,0BACI,iCAIR,8BACI,iCACA,6BACA,eACA,oBAGJ,oCACI,iCChEZ,SACI,wBACA,qBACA,gBACA,iCACA,YACA,gBACA,4BACA,aACA,cACA,WAEA,+BACI,iCAGJ,6DACI,iCCjBR,OACI,cACA,cACA,iBACA,aACA,kBACA,aAEA,oDACI,oBACA,cACA,kBACA,aAEA,kBAGI,MAGJ,qBAGI,SAGJ,qBACI,UAGJ,mBACI,OAGJ,oBACI,QCnCZ,aACI,eACA,kBAEA,oBACI,kCACA,oBACA,YACA,4BACA,yBACA,SACA,mBACA,gBACA,eACA,UACA,mBACA,oBACA,kBACA,kCACA,qBACA,kCACA,kBACA,cACA,iBACA,iBACA,kBACA,mBACA,mBACA,qBACA,WAGJ,0BACI,UACA,oBACA","file":"stylus.min.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"]}