@import 'extra-actions';

.ez-btn {
    display: inline-block;
    padding: calculateRem(11px) calculateRem(16px);
    outline: none;
    border: none;
    border-radius: $ibexa-border-radius;
    text-decoration: none;
    font-size: calculateRem(15px);
    line-height: calculateRem(16px);
    transition: all 0.2s $ibexa-admin-transition;

    &:hover,
    &:focus,
    &:active {
        border: none;
        outline: none;
        text-decoration: none;
    }

    &--primary {
        color: $ibexa-white;
        background-color: $ibexa-color-primary;

        &:hover {
            color: $ibexa-white;
            background-color: darken($ibexa-color-primary, 7.5%);
        }

        &:active {
            background-color: darken($ibexa-color-primary, 7.5%);
        }

        &:focus {
            background-color: darken($ibexa-color-primary, 7.5%);
            box-shadow: 0 0 0 calculateRem(4px) rgba($ibexa-color-primary, 0.5);
        }

        &.btn:disabled,
        &.btn.disabled {
            opacity: 1;
        }

        &:disabled,
        &.disabled {
            background-color: $ibexa-color-base;
            color: $ibexa-color-base-dark;
            fill: $ibexa-color-base-dark;
            box-shadow: none;
        }
    }

    &--base-dark {
        color: $ibexa-color-base-dark;
        background-color: transparent;
        box-shadow: inset 0 0 0 calculateRem(1px) $ibexa-color-base-dark;

        &:hover {
            color: $ibexa-color-base-dark;
            background-color: $ibexa-color-base-light;
        }

        &:active {
            color: $ibexa-white;
            fill: $ibexa-white;
            background-color: $ibexa-color-base-dark;
            box-shadow: inset 0 0 0 calculateRem(2px) $ibexa-color-base-dark;

            .ez-icon {
                fill: inherit;
            }
        }

        &:focus {
            box-shadow: inset 0 0 0 calculateRem(1px) $ibexa-color-base-dark;
        }

        &:disabled,
        &.disabled {
            opacity: 0.3;
            color: $ibexa-color-base-dark;
            background-color: transparent;
            fill: $ibexa-color-base-dark;
            box-shadow: inset 0 0 0 calculateRem(1px) $ibexa-color-base-dark;
        }

        .ez-icon {
            fill: $ibexa-color-base-dark;
        }
    }

    &--no-border {
        color: $ibexa-color-primary;
    }

    &--action-icon {
        .ez-icon {
            fill: $ibexa-color-base-dark;
        }
    }

    &--add-translation {
        .ez-icon {
            margin-right: 0;
        }
    }

    &__label {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.btn-icon {
    padding: 0;
}

.ez-side-menu,
.ez-context-menu {
    .ez-sticky-container > .btn {
        width: 100%;
        height: calculateRem(80px);
        padding: calculateRem(2px) calculateRem(4px);
        border: 0;
        border-radius: 0;
        text-decoration: none;
        font-size: calculateRem(13px);
        line-height: calculateRem(18px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &:hover,
        &:focus {
            box-shadow: none;
            outline: none;
        }

        &:first-child {
            border-top-left-radius: $ibexa-border-radius;
            border-top-right-radius: $ibexa-border-radius;
        }

        &:last-child {
            border-bottom-left-radius: $ibexa-border-radius;
            border-bottom-right-radius: $ibexa-border-radius;
        }

        .ez-icon {
            display: block;
            width: calculateRem(24px);
            height: calculateRem(24px);
            margin: 0 auto calculateRem(5px);
        }

        &.ez-btn--active-button {
            &:hover {
                @extend .ez-btn--active-button;
            }
        }
    }
}

.ez-side-menu {
    .btn-dark {
        &:hover {
            background-color: lighten($ibexa-color-base-black, 7.5%);
        }

        &.ez-btn--content-tree-expanded {
            &:hover {
                @extend .ez-btn--content-tree-expanded;
            }
        }
    }
}

.ez-context-menu {
    .ez-sticky-container > .btn.disabled,
    .ez-sticky-container > .btn[disabled] {
        opacity: 1;
        color: rgba($ibexa-white, 0.5);
        background-color: $ibexa-color-primary;

        .ez-icon {
            opacity: 0.5;
        }
    }
}

.btn.disabled,
.btn[disabled] {
    opacity: 0.3;
}

.btn.btn-primary.disabled,
.btn.btn-primary[disabled] {
    opacity: 1;
    background-color: $ibexa-color-base;
    color: $ibexa-color-base-dark;
    fill: $ibexa-color-base-dark;
}

.btn.btn-secondary.disabled,
.btn.btn-secondary[disabled] {
    opacity: 1;
    background-color: rgba($ibexa-color-base-deep, 0.3);
    color: $ibexa-color-base-dark;
    fill: $ibexa-color-base-dark;
}

.ez-btn--select-subtree {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    .ez-icon {
        margin-right: calculateRem(8px);
    }
}

.ez-modal--trash-with-asset {
    .modal-footer {
        .btn-secondary {
            background-color: $ibexa-color-base-dark;
            border-color: $ibexa-color-base-dark;

            &:hover {
                background-color: $ibexa-color-base-dark;
                border-color: $ibexa-color-base-dark;
            }
        }
    }
}

.ez-content-view,
.ez-trash-list-view {
    .ez-modal--send-to-trash {
        .modal-footer {
            .form-check-inline {
                margin-right: 0;

                .btn-danger {
                    margin-right: 0;
                }
            }
        }
    }
}

.ez-btn--content-edit {
    background-color: transparent;
    cursor: pointer;
}

.ez-btn--cotf-create {
    display: flex;
    align-items: center;
}

.ez-btn--content-tree-expanded {
    background: $ibexa-white;
    border-color: $ibexa-white;
    color: $ibexa-black;
}

.ez-btn--wide,
.ez-btn.ez-btn--wide {
    padding: calculateRem(8px) calculateRem(48px);
}

.ez-btn--active-button {
    background-color: $ibexa-white;
    color: $ibexa-color-primary;
    border-color: $ibexa-white;

    .ez-icon {
        fill: $ibexa-color-primary;
    }
}

button:focus {
    outline: 0;
}
