@mixin btn-block($color)
    background-color: RGBA($color, 0.1)
    color: RGB($color)
    // box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)

    &:hover, &:focus-visible
        background-color: RGBA($color, 0.15)
        color: RGB($color)
        // box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($color, 0.2)

    
.btn-block
    padding: 0.4rem 0.7rem

    width: auto
    min-height: 2.3rem

    display: flex
    justify-content: center
    align-items: center
    gap: 0.5rem

    position: relative

    font-size: 1rem
    font-weight: 400
    text-align: center

    background-color: RGBA($white, 0.1)
    color: RGB($white)
    border: none
    border-radius: $rad-inner
    // box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
    outline: none

    cursor: pointer
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out

    &:hover, &:focus-visible
        background-color: RGBA($white, 0.2)
        // box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)

    &.transparent
        background-color: transparent

        &:hover, &:focus-visible
            text-decoration: underline

    &.primary
        @include btn-block($primary)
    &.critical
        @include btn-block($critical)
    &.warning
        @include btn-block($warning)
    &.success
        @include btn-block($success)
    &.info
        @include btn-block($info)
    &.black
        @include btn-block($black)

    &.disabled, &:disabled
        color: RGB($fg-dim)
        cursor: unset

.input-checkbox
    padding: 0
    display: flex
    justify-content: flex-start
    align-items: center
    gap: 0.5rem

    position: relative

    label
        font-size: 1rem
        font-weight: 400
        text-align: left
        
        color: RGB($fg-white)

.input-block
    padding: 0.4rem 0.7rem

    width: auto
    min-height: 2.3rem

    display: flex
    justify-content: flex-start
    align-items: center

    position: relative

    font-size: 1rem
    font-weight: 400
    text-align: left

    background-color: RGBA($white, 0.1)
    color: RGB($white)
    border: none
    border-bottom: 3px solid RGBA($white, 0.1)
    border-radius: $rad-inner
    // box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
    outline: none

    cursor: pointer
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out

    &:not(:focus):not([value=""]):not(:placeholder-shown)
        border-color: RGBA($white, 0.3)

    &:hover
        border-color: RGBA($white, 0.3)

    &:focus
        border-color: RGB($primary)

    &.black
        @include btn-block($black)

.fileDrop-block
    padding: 1rem 1.25rem

    width: 100%
    min-height: 2.3rem

    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    gap: 0.5rem

    position: relative

    font-size: 1rem
    font-weight: 400
    text-align: center

    background-color: RGBA($white, 0.1)
    color: RGB($white)
    border: none
    border-radius: $rad-inner
    // box-shadow: 0 1px 0 RGBA($black, 0.2), 0 -1px 0 RGBA($white, 0.2)
    outline: none

    cursor: pointer
    overflow: hidden
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.15s ease-in-out

    input
        position: absolute
        inset: 0
        opacity: 0
        cursor: pointer

    i
        font-size: 1.2rem

    .status
        width: 100%
        white-space: nowrap
        text-overflow: ellipsis
        text-align: center
        overflow: hidden

    &:hover, &:focus-visible
        background-color: RGBA($white, 0.2)
        color: RGB($white)
        // box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)

    &.active
        background-color: RGBA($primary, 0.2)
        color: RGB($primary)
        // box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($primary, 0.3)

    &.edging
        background-color: RGBA($white, 0.2)
        color: RGB($white)
        // box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($white, 0.3)

        input
            display: none // So it doesnt get in the way of the drop as that breaks things

    &.error
        background-color: RGBA($critical, 0.2)
        color: RGB($critical)
        // box-shadow: 0 1px 0 RGBA($black, 0.3), 0 -1px 0 RGBA($critical, 0.3)
