.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: var(--white-transparent)
    color: var(--white)
    border: none
    border-radius: calc(var(--rad) / 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: var(--white-transparent)

    &.transparent
        background-color: transparent

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

    &.primary
        background-color: var(--primary-transparent)
        color: var(--primary)

        &:hover, &:focus-visible
            background-color: var(--primary)
            color: var(--black)
    &.success
        background-color: var(--success-transparent)
        color: var(--success)

        &:hover, &:focus-visible
            background-color: var(--success)
            color: var(--black)
    &.warning
        background-color: var(--warning-transparent)
        color: var(--warning)

        &:hover, &:focus-visible
            background-color: var(--warning)
            color: var(--black)
    &.critical
        background-color: var(--danger-transparent)
        color: var(--danger)

        &:hover, &:focus-visible
            background-color: var(--danger)
            color: var(--black)
    &.info
        background-color: var(--info-transparent)
        color: var(--info)

        &:hover, &:focus-visible
            background-color: var(--info)
            color: var(--black)
    &.black
        background-color: var(--black-transparent)
        color: var(--white)

        &:hover, &:focus-visible
            background-color: var(--black)
            color: var(--white)

    &.disabled, &:disabled
        color: var(--foreground-gray)
        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: var(--foreground-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: var(--white-transparent)
    color: var(--white)
    border: none
    border-bottom: 3px solid var(--white-transparent)
    border-radius: calc(var(--rad) / 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: var(--white-transparent)

    &:hover
        border-color: var(--white-transparent)

    &:focus
        border-color: var(--primary)

    &.black
        background-color: var(--black-transparent)
        color: var(--white)

        &:hover, &:focus-visible
            background-color: var(--black)
            color: var(--white)

.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: var(--white-transparent)
    color: var(--white)
    border: none
    border-radius: calc(var(--rad) / 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: var(--white-transparent)
        color: var(--white)

    &.active
        background-color: var(--primary-transparent)
        color: var(--primary)

    &.edging
        background-color: var(--white-transparent)
        color: var(--white)

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

    &.error
        background-color: var(--danger)
        color: var(--black)