@mixin btn-block($color)
    background-color: rgba($color, 0.1)
    color: $color

    &:hover
        background-color: rgba($color, 0.3)
        color: $color

    &:focus-visible
        outline: 2px solid rgba($color, 0.5)
    
.btn-block
    padding: 0.5rem 1rem

    width: auto
    min-height: 2.5rem

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

    position: relative

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

    background-color: rgba($white, 0.1)
    color: $white
    border: none
    border-radius: $rad-inner

    cursor: pointer

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

    &:hover
        background-color: rgba($white, 0.3)
    
    &:focus-visible
        outline: 2px solid rgba($white, 0.5)

    &.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)


.input-block
    padding: 0.5rem 1rem

    width: auto
    min-height: 2.5rem

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

    position: relative

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

    background-color: rgba($white, 0.1)
    color: $white

    border: none
    border-bottom: 3px solid $gray
    border-radius: $rad-inner

    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: $white

    &:hover
        border-color: $white

    &:focus
        border-color: $primary
        outline: none

    &.file
        padding: 0 1rem 0 0
        border: none
        background-color: rgba($white, 0.1)

        &:focus-visible
            outline: 2px solid rgba($white, 0.5)

        &::file-selector-button
            margin-right: 1rem
            padding: 0.5rem 1rem

            width: auto
            height: 100%

            font-size: 1rem
            text-decoration: none

            background-color: $white
            color: $black
            border: none
            border-radius: $rad-inner

            &:not([value=""])
                display: none

.fileDrop-block
    padding: 1rem 1.25rem

    width: 100%
    min-height: 2.5rem

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

    position: relative

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

    background-color: rgba($white, 0.1)
    color: $white

    border: none
    border-radius: $rad-inner

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

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

    &:hover
        background-color: rgba($white, 0.2)
        color:  $white

    &.active
        background-color: rgba($primary, 0.2)
        color:  $primary

    &.edging
        background-color: rgba($white, 0.2)
        color:  $white

        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:  $critical