@import "~scss/variables";
@import "~scss/mixins";

$sw-text-editor-toolbar-button-child-shadow: rgba(120, 138, 155, 50%);
$sw-text-editor-toolbar-button-arrow-shadow: rgba(120, 138, 155, 50%);

.sw-text-editor-toolbar-button {
    position: relative;
    height: 36px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    &.is--active {
        color: $color-shopware-brand-500;
    }

    &.is--disabled {
        color: $color-gray-300;
        cursor: initial;
    }

    .sw-text-editor-toolbar-button__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        cursor: pointer;

        &:hover {
            color: $color-shopware-brand-500;
        }

        .sw-icon {
            margin-left: 5px;
        }
    }
}

.sw-text-editor-toolbar-button__children {
    background: $color-white;
    border-radius: 4px;
    flex-direction: column;
    position: absolute;
    left: var(--flyoutLinkLeftOffset, 0);
    top: calc(100% + 6px);
    white-space: nowrap;
    border: 1px solid $color-gray-300;
    box-shadow: 0 3px 6px 0 $sw-text-editor-toolbar-button-child-shadow;
    z-index: 260;

    &::before {
        content: "";
        position: absolute;
        top: -5px;
        left: var(--arrow-position, 10px);
        height: 8px;
        width: 8px;
        transform: rotate(45deg);
        background: $color-white;
        border-top: 1px solid $sw-text-editor-toolbar-button-arrow-shadow;
        border-left: 1px solid $sw-text-editor-toolbar-button-arrow-shadow;
    }

    &-inner-container {
        padding: 4px;
        max-height: 340px;
        max-width: 300px;
        overflow: auto;
    }

    &.is--left {
        left: unset;
        right: -10px;

        &::before {
            left: unset;
            right: 23px;
        }
    }

    .sw-text-editor-toolbar-button__children-child {
        cursor: pointer;
        color: $color-darkgray-200;
        margin: 4px;
        padding: 8px;
        border-radius: $border-radius-default;

        &-content {
            @include truncate;

            width: 100%;
        }

        &:hover {
            color: $color-shopware-brand-500;
            background: $color-shopware-brand-50;
        }

        &.is--active {
            color: $color-shopware-brand-500;
        }

        &.is--disabled {
            color: $color-gray-300;
            cursor: initial;
        }
    }

    .sw-text-editor-toolbar-button__link-menu {
        width: 500px;
        cursor: initial;
        color: $color-darkgray-200;

        .sw-text-editor-toolbar-button__link-menu-content {
            padding: 16px;

            .sw-block-field {
                margin-bottom: 19px;
            }

            .sw-category-tree-field__results {
                height: 300px;
            }
        }

        .sw-text-editor-toolbar-button__link-menu-buttons {
            background-color: $color-gray-100;
            display: grid;
            grid-auto-flow: column;
            justify-content: space-between;
            padding: 15px;
        }

        .sw-text-editor-toolbar-button__link-menu-switch {
            margin: 0;

            .sw-field--switch__input {
                padding: 10px;
            }

            .sw-field__label label {
                padding: 10px 15px;
            }
        }

        .sw-field {
            &.sw-field--switch {
                margin-bottom: 5px;
            }

            &.sw-field--text {
                padding: 4px 0;
                margin-bottom: 10px;
            }
        }
    }
}
