
.btn-icon, .icon_button
    margin-left: auto
    margin-right: auto
    height: 40px
    width: 40px
    border-radius: 5px
    line-height: 40px
    text-align: center
    border-radius: 40px
    cursor: pointer
    transition: color 0.3s ease, box-shadow 0.3s ease
    &:hover
        box-shadow: 0px 0px 3px gray
        color: $attention
        transition: color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease
        background-color: $fg_components

    .loading2, .loading1
        display: none
        transform: rotate(29deg)
        width: 25%
        height: 300%
        position: absolute
        opacity: 0.5
        top: -100%
        left: -50%

    &.loading
            background-image: linear-gradient(#9d9d9d, #d0d0d0)
            &:hover
                background-image: linear-gradient(#9d9d9d, #d0d0d0)

            .loading1
                display: block

                background-color: orange
                -webkit-animation: button_loading 1s linear infinite -1.6s 
                animation: button_loading 1s linear infinite -1.6s

            .loading2
                display: block
                background-color: red
                -webkit-animation: button_loading 1s linear infinite -1.6s 
                animation: button_loading 1s linear infinite -1.6s reverse

@keyframes button_loading
  0%
    left: -50%
  100%
    left: 110%


button
    &.btn
        border: none !important


.btn, .button
    &>i
        margin-right: 10px
    margin: 5px
    padding: 5px 10px 7px 10px
    background-color: $components
    border-radius: 10px
    position: relative
    text-decoration: none
    background-image: linear-gradient($black, $components)
    color: $fg_components
    transition: background-image 0.3s ease
    text-align: center

    &.btn-inline
        white-space: nowrap
        padding: 0.1em 0.5em
        font-size: 0.9em

    &::after
        content: ""
        position: absolute
        width: calc(100% - 8px)
        left: 4px
        background-color: rgba(255, 255, 255, 0.2)
        height: 10px
        border-radius: 6px 6px 1px 1px
        top: 3px
        background-image: linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0))
    &:hover
        background-image: linear-gradient($black, $ok)
    &[disabled]
        background-image: linear-gradient(rgb(202, 202, 202), rgb(220, 220, 220))
        &:hover
            color: white
            background-image: linear-gradient(rgb(202, 202, 202), rgb(220, 220, 220))

.phanterpwa-widget-form-form_button-container, .button-container
    padding: 2px 2px 
    display: inline-block 
    width: auto
    max-width: 300px 
    margin-left: auto 
    margin-right: auto 
    .btn 
        width: 100% 

    .btn-form, .button-form
        display: inline-block 
        width: 100%
    button
        margin: 0

.icon_button
    &.disabled
        cursor: unset
        color: grey
        &:hover
            color: grey
            box-shadow: unset
.phanterpwa-widget-table
    .icon_button
        background-color: #f7f7f7
        border: 1px solid #d7d7d7
        color: $components
        line-height: 38px

.icon_button
    &.table_button_style
        background-color: #f7f7f7
        border: 1px solid #d7d7d7
        color: $components
        line-height: 38px

.icon_button[disabled]
    cursor: unset
    color: grey
    &:hover
        color: grey
        box-shadow: unset

a
    &.icon_button
        display: block;
        text-decoration: none;
        color: unset;
