@mixin btn-block($color)
    background-color: transparent
    color: $color

    &:hover
        background-color: $color
        color: $black

    &: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: transparent
    color: $black
    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: $black
        color: $white
    
    &:focus-visible
        outline: 2px solid rgba($black, 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: $black
    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
        outline: 2px solid rgba($white, 0.5)

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

    &.file
        padding: 0 1rem 0 0

        &::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