@import "app/styles/variables";

bl-button-group {
    display: block;
}

bl-button {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    line-height: $action-btn-size;
    position: relative;
    margin: 2px;

    .hide {
        opacity: 0;
    }

    .overlay {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .fa-check {
        color: map-get($success, 800);
        overflow: hidden;
    }

    .success-container {
        width: 50%;
        text-align: left;
        display: inline-block;
    }

    &[type="wide"] {
        border: 2px solid transparent;

        &.focus-outline.focus-visible, &.focus-visible {
            border-color: $primary-color-dark;
            outline-color: white;
            outline-width: 2.5px;
            outline-style: solid;
            outline-offset: -4.5px;
            opacity: 1;
            text-align: center;
        }
    }

    &[type="plain"] {
        &[color="primary"] {
            color: $primary-color;
            &:hover, &:focus {
                color: $primary-color-light;
            }
        }

        &[color="light"] {
            color: $primary-text;

            &:hover, &:focus {
                color: $button-focus-text-color;
            }
        }

        &[color="danger"] {
            color: $danger-color;
            &:hover, &:focus {
                color: $danger-color-light;
            }
        }

        &.disabled[color] {
            color: $button-disabled-text-color;
            background: none;
        }
    }

    &[type="square"], &[type="round"] {
        width: $action-btn-size;
    }

    &[type=square][color="primary"] {
         &.focus-outline.focus-visible, &.focus-visible {
            outline-color: white;
            outline-width: 2px;
            outline-style: solid;
            outline-offset: -4px;
        }
    }

    &[type="round"] {
        border-radius: 99%;

        &:focus {
            box-shadow: inset 0 0 0 1px $outline-color;
            outline: none;
        }
    }

    &[type="wide"] {
        padding: 0 10px;
        min-width: $action-btn-size;
    }

    &[type="square"], &[type="round"], &[type="wide"] {
        &.disabled[color] {
            cursor: not-allowed;
            color: $button-disabled-text-color;
            background: $button-disabled-bg-color;

            &:hover, &:focus, &:active {
                color: $button-disabled-text-color;
                background: $button-disabled-bg-color;
            }
        }

        &[color="primary"] {
            background: $primary-color;
            color: $primary-contrast-color;

            &:hover, &:focus {
                background: $primary-color-dark;
            }

            &:active {
                background: $primary-color;
            }
        }

        &[color="light"] {
            color: $button-basic-text-color;
            background: transparent;

            &:hover {
                background: $button-basic-hover-bg-color;
            }
        }

        &[color="danger"] {
            background: $danger-color;
            color:  $danger-contrast-color;

            &:hover, &:focus {
                background: $danger-color-dark;
            }
        }

        &[color="warn"] {
            background: $warn-color;
            color:  $warn-contrast-color;

            &:hover, &:focus {
                background: $warn-color-dark;
            }
        }

        &[color="success"] {
            background: $success-color;
            color:  $success-contrast-color;

            &:hover, &:focus {
                background: $success-color-dark;
            }
        }
    }
}

.btn-tooltip {
    font-size: $font-size-small !important
}

@media (forced-colors: active) {
    bl-button {
        border: 1px solid currentColor;

        &.disabled {
            opacity: 0.3;
        }
    }
}
