@import '_vars'

button
    line-height: 2
    cursor: pointer
    font-size: 16px
    border-radius: $edge
    padding: 0.7rem 1.5rem
    font-weight: 600
    margin-bottom: 1rem

    color: $text
    background: $primary

    transition: box-shadow 0.2s

    &:hover
        filter: brightness(1.2)

    &.special
        box-shadow: 0 0 20px $primary-glow

        &:hover
            box-shadow: 0 0 20px $primary

    &.secondary
        color: $text
        background: $secondary
        border: 1px solid $border

    svg, img
        height: 24px
        display: inline-block
        vertical-align: middle
        filter: invert(180)

    mark
        background: $soft

input:not([type="checkbox"]):not([type="radio"])
    width: 100%
    font-size: 18px
    border-radius: $edge
    padding: 0.5rem 1rem

    color: $text
    background: $secondary
    border: 1px solid $primary

    &:focus
        outline: none

input[type="radio"]
    filter: hue-rotate(50deg)

span.secret
    cursor: pointer
    font-size: 14px
    font-family: monospace
    padding: 2px 4px
    border-radius: $edge
    color: transparent
    background: $soft

    transition: color 200ms

    &.revealed
        color: $text
        background: $soft

.copied::after
    content: 'Copied!'
    position: absolute
    padding: 2px 4px
    transform: translateX(10px)
    border-radius: $edge
    background: $soft
    border: 1px solid $success
    color: $text