@use "variables" as *;

:host {
    &.ui-draggable-dragging {
        .row {
            background-color: $white;
            box-shadow: $shadow-s;
        }
    }
}

.row {
    display: flex;
    height: 16rem;
    border: 1px solid $color-palette-primary;
    border-radius: $border-radius-md;
    z-index: -2;

    &:active {
        box-shadow: $shadow-s;
    }
}

dotcms-template-builder-background-columns {
    position: absolute;
    inset: $spacing-3 3.625rem $spacing-4 $spacing-3;
    z-index: -1;
    transition: opacity 0.35s ease-in-out;
}

.row__actions-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 2.625rem;
    flex-direction: column;
    gap: $spacing-1;
    padding: $spacing-1 0;
    background-color: $color-palette-gray-200;
    border-left: 1px solid $color-palette-primary;
    border-radius: 0 $border-radius-md $border-radius-md 0;
}

.row__drag-container {
    padding: $spacing-2;

    .drag-container__drag-handler {
        color: $color-palette-primary-500;
        user-select: none;
    }

    &:hover {
        cursor: grab;
    }

    &:active {
        cursor: grabbing;
    }
}

.row__content-container {
    flex-grow: 1;
    padding: 0 $spacing-1;
}
