@use 'sass:math'
@import base

.root
    font: var(--font-size-sm)/var(--line-height-sm) var(--font-primary)
    margin-bottom: var(--spacing-md)
    border-radius: var(--border-radius)
    background: var(--color-subtle-light)
    padding-top: 1rem

.title
    padding: 0 2rem
    margin-bottom: 2rem

    a:before
        content: ""

.description
    padding: 0 2rem

.group
    padding: 0.75rem 2rem 0
    border: none

@include breakpoint(min, md)
    .group
        display: flex
        flex-flow: row nowrap

.input
    // Hide inputs while keeping them focussable
    opacity: 0
    width: 0
    height: 0
    position: absolute
    left: -9999px

.label
    cursor: pointer
    display: inline-block
    padding: 0.35rem 0.5rem 0.25rem 0
    margin: 0 1rem 0.5rem 0
    font-size: var(--font-size-xs)
    font-weight: bold

    &:hover
        background: var(--color-subtle-light)

    .input:focus
        border: 1px solid var(--color-theme-dark)
        outline: none

    .radio + &
        margin: 0 0 0.75rem 0
        border-radius: 0
        border-width: 1px 0 1px 1px
        border-style: solid
        border-color: var(--color-subtle)
        background: var(--color-back)
        padding: 0.65rem 1.25rem

        &:nth-child(2)  // first child is checkbox
            border-top-left-radius: var(--border-radius)
            border-bottom-left-radius: var(--border-radius)

        &:nth-last-child(2)  // last child is additional container
            border-top-right-radius: var(--border-radius)
            border-bottom-right-radius: var(--border-radius)
            border-right-width: 1px

    .radio:checked + &
        color: var(--color-back)
        border-color: var(--color-theme-dark)
        background: var(--color-theme-dark)

    .checkbox + &:before
        $size: 18px
        content: ""
        display: inline-block
        width: $size
        height: $size
        border: 1px solid var(--color-subtle)
        vertical-align: middle
        margin-right: 0.5rem
        cursor: pointer
        border-radius: math.div($size, 4)
        background: var(--color-back)
        position: relative
        top: -1px

    .checkbox:checked + &:before
        // Embed "check" icon here for simplicity
        background: var(--color-theme-dark) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gICAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTkgMTYuMTcybDEwLjU5NC0xMC41OTQgMS40MDYgMS40MDYtMTIgMTItNS41NzgtNS41NzggMS40MDYtMS40MDZ6Ii8+PC9zdmc+)
        background-size: contain
        border-color: var(--color-theme-dark)

.field-extra:not(:empty):not(:first-child)
    margin-left: 1rem

.legend
    color: var(--color-dark)
    padding: 0.75rem 0
    flex: 1 1 35%
    font-weight: bold

.fields
    flex: 100%

.select
    cursor: pointer
    border: 1px solid var(--color-subtle)
    border-radius: var(--border-radius)
    display: inline-block
    padding: 0.35rem 1.25rem
    margin: 0 1rem 0.75rem 0
    font-size: var(--font-size-sm)
    background: var(--color-back)

.select-hidden
    display: none

.text-input
    border: 1px solid var(--color-subtle)
    border-radius: var(--border-radius)
    display: inline-block
    padding: 0.35rem 0.75rem
    font-size: var(--font-size-sm)
    background: var(--color-back)

.code
    background: var(--color-front)
    color: var(--color-back)
    padding: 0.75em 0
    overflow: auto
    width: 100%
    max-width: 100%
    margin: 1rem 0 0
    border-bottom-left-radius: var(--border-radius)
    border-bottom-right-radius: var(--border-radius)
    -webkit-font-smoothing: subpixel-antialiased
    -moz-osx-font-smoothing: auto
    position: relative

.results
    display: block
    font: normal normal var(--font-size-lg)/var(--line-height-lg) var(--font-code)
    line-height: 2
    padding: 1em 2em

    & > span
        display: block

    a
        text-decoration: underline

.small
    font-size: var(--font-size-code)
    line-height: 1.65
    white-space: pre-wrap
    max-height: 400px
    overflow-y: auto

    & > span
        display: inline

.hide-prompts .prompt:before
    content: initial !important

.prompt:before
    color: var(--color-theme-dark)
    margin-right: 1em

.bash:before
    content: "$"

.python:before
    content: ">>>"

.comment
    color: var(--syntax-comment)

.divider
    padding: 1.5rem 0

.help
    color: var(--color-subtle-dark)

    .input:checked + .label &
        color: inherit

.copy-area
    width: 1px
    height: 1px
    opacity: 0
    position: absolute

.menu
    color: var(--color-subtle-on-dark)
    padding-right: 1.5rem
    display: inline-block
    position: absolute
    bottom: var(--spacing-xs)
    right: 0

.icon-button
    display: inline-block
    color: inherit
    cursor: pointer
    transition: transform 0.05s ease

    &:not(:last-child)
        margin-right: 1.5rem

    &:hover
        transform: scale(1.1)
