@import "~scss/variables";

.sw-cms-stage-section-selection {
    width: 100%;
    height: 200px;
    display: grid;
    grid-gap: 48px;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    background: $color-gray-50;

    .sw-cms-stage-section-selection__sidebar {
        justify-self: end;
    }

    .sw-cms-stage-section-selection__default {
        justify-self: start;
    }

    .sw-cms-stage-section-selection__sidebar-preview,
    .sw-cms-stage-section-selection__default-preview {
        cursor: pointer;
        width: 200px;
        height: 112px;
        background: #fff;
        padding: 12px 16px;
        border: 1px solid $color-gray-300;
        border-radius: $border-radius-default;
        margin-bottom: 8px;

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

    .sw-cms-stage-section-selection__sidebar-preview-inner,
    .sw-cms-stage-section-selection__default-preview-inner {
        height: 100%;
        width: 100%;
        border: 1px dashed $color-gray-300;
        border-radius: $border-radius-default;
    }

    .sw-cms-stage-section-selection__sidebar-preview-inner {
        border: none;
        display: grid;
        grid-template-columns: 32px 120px;
        grid-gap: 8px;
        justify-content: center;

        .sw-cms-stage-section-selection__sidebar-preview-placeholder {
            border: 1px dashed $color-gray-300;
            border-radius: $border-radius-default;
        }
    }
}
