@import "~scss/variables";

.sw-cms-layout-modal {
    .sw-cms-layout-modal__header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        padding: 24px 30px;
        border-bottom: 1px solid $color-gray-300;

        .sw-cms-layout-modal__actions-sorting {
            display: grid;
            grid-template-columns: auto 36px;
            grid-column-gap: 20px;
            align-items: center;
            align-content: center;
        }

        .sw-cms-layout-modal__actions-mode {
            height: 36px;
            line-height: 33px;
            text-align: center;
            color: $color-darkgray-200;
            border: 1px solid $color-gray-300;
            border-radius: 4px;
            background: $color-white;
            cursor: pointer;

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

        .sw-cms-layout-modal__header-title {
            font-size: $font-size-m;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .sw-simple-search-field {
            margin-bottom: 0;
        }
    }

    .sw-cms-layout-modal__content {
        display: flex;
        flex-direction: column;
        padding: 20px 30px;
        overflow-y: auto;

        .sw-cms-layout-modal__content-item {
            position: relative;

            &.is--selected .sw-cms-list-item {
                border-color: $color-shopware-brand-500;
            }

            .sw-field--checkbox {
                margin: 0;
                width: 16px;
                position: absolute;
                grid-template-columns: 16px;
                top: 24px;
                left: 24px;
            }
        }
    }

    .sw-cms-layout-modal__content-pagination {
        margin-top: 20px;
    }

    &.sw-media-modal-v2.sw-media-modal-v2--default {
        .sw-media-modal-v2__dialog {
            max-width: 960px;
        }

        .sw-media-modal-v2__body {
            padding: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 520px;
        }
    }
}

.sw-cms-layout-modal.sw-modal .sw-modal__body {
    padding: 0;
}
