/* styles for the buttons */

.btn {
    text-transform: uppercase;
    padding-inline: 1.25em;
    border-radius: 8px;

    &.notdisplaydisabled:disabled{
        opacity: 1;

        &:hover{
            border-color: var(--iz-darkblue);
            background-color: var(--iz-darkblue);
            color: white;
        }
    }
}

.btn-primary,
.navbar.bg-primary {
    background-color: var(--iz-lightblue-wcag);
}

.btn-primary {
    color: white;
    border-color: var(--iz-lightblue-wcag);

    &:hover {
        background-color: white;
        color: var(--iz-lightblue-wcag);
    }

    &:focus {
        color: white;
        background-color: var(--iz-lightblue-wcag);
    }

    &:not(:disabled).active {
        background-color: white;
        color: var(--iz-lightblue-wcag);
        border-color: var(--iz-lightblue-wcag);

        &:hover {
            background-color: white;
            color: var(--iz-lightblue-wcag);
        }
    }

    &.disabled{
        color: #fff;
        background-color: #c8c8c8;
        border-color: #c8c8c8;
        cursor: not-allowed;
    }
}

.list-group-item.active {
    background-color: var(--iz-lightblue-wcag);
    font-weight: bold;
}

.btn-secondary,
.navbar.bg-secondary {
    background-color: var(--iz-yellow);
    border: none;
    color: var(--iz-darkblue);
}

.btn-secondary {
    &:hover {
        background-color: var(--iz-darkblue);
        color: var(--iz-yellow);
    }
}

.btn-iz-darkblue {
    background-color: var(--iz-darkblue);
    border-color: var(--iz-darkblue);
    color: white;

    &:hover,
    &:focus {
        background-color: white;
        border-color: var(--iz-darkblue);
        color: var(--iz-darkblue);
    }
}

.btn-success {
    background-color: var(--iz-green);
    border-color: var(--iz-green);
    color: white;
    box-shadow: none;

    &:hover,
    &:focus {
        background-color: white;
        border-color: var(--iz-green);
        color: var(--iz-green);
    }
    
    &.disabled:hover{
        color: #fff;
        background-color: #28a745;
        border-color: #28a745;
    }
}

.btn-danger {
    &:hover,
    &:focus {
        background-color: white;
        border-color: var(--danger);
        color: var(--danger);
    }
}

.btn-light {
    border: 1px solid var(--iz-lightblue-wcag);
    background-color: white;
    color: var(--iz-lightblue-wcag);

    &:hover {
        background-color: var(--iz-lightblue-wcag);
        border: 1px solid var(--iz-lightblue-wcag);
        color: white;
    }
}

.navbar > div.border-bottom .btn-light {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom: 0;
}

.btn-light.disabled,
.btn-secondary.disabled {
    color: #fff;
    background-color: #c8c8c8;
    border-color: #c8c8c8;
    cursor: not-allowed;
}

.btn-warning {
    background-color: var(--iz-yellow) !important;
    border-color: var(--iz-yellow) !important;
}

.btn-outline-primary {
    color: var(--iz-lightblue-wcag);
    border-color: var(--iz-lightblue-wcag);

    &:hover {
        background-color: var(--iz-lightblue-wcag);
        color: white;
    }
}

.preview-amount.set-amount {
    .set-amount-preview {
        input {
            background-color: var(--iz-bg-color-grey);
            border: 1px solid var(--iz-darkblue);
            font-size: 0.85rem;
        }
    }
}

.btn-set-amount-preview,
.btn-item-comments {
    border: none;
    position: relative;
    /* background-color: var(--iz-bg-color-grey); */

    &::after {
        margin-left: 8px;
        font-weight: 900;
        font-family: "Font Awesome 6 Pro";
    }

    &:hover {
        color: var(--iz-lightblue-wcag);
    }
}

.btn-set-amount-preview {
    &::after {
        content: "\f303";
    }

    &:hover {
        &::after {
            content: "\f304";
        }
    }
}

.btn-item-comments {
    padding: 0;

    &::after {
        content: "\f075";
    }

    &.disabled {
        visibility: hidden;
        color: #6b6b6b;

        &::after {
            content: "\f4b3";
        }

        &:hover {
            color: #6b6b6b;
        }
    }
}

.show > .btn-primary.dropdown-toggle {
    background-color: var(--iz-lightblue-wcag);
    border-color: var(--iz-lightblue-wcag);
}