@use "variables" as *;
@import "mixins";

.template-builder-box,
.template-builder-box--small {
    ::ng-deep {
        .pi.pi-trash {
            color: $color-palette-primary-400;
        }

        .p-dropdown {
            margin-left: 0;
        }
    }
}

.template-builder-box--medium {
    ::ng-deep {
        .p-button-text {
            margin: $spacing-3 0;
        }

        .p-dropdown-label {
            @include visually-hidden;
        }

        .p-dropdown-trigger-icon {
            font-size: $font-size-sm;
            margin: $spacing-3;
        }
        .p-dropdown .p-dropdown-trigger {
            width: 0.875rem; // 14px
            height: 0.875rem; // 14px
            background-color: transparent;
        }

        p-dropdown {
            height: 2rem;
            width: 2rem;
        }

        .p-dropdown {
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            padding: 0.5625rem; // 9px
            height: 2rem;
            width: 2rem;
            border: none;

            &:not(.p-disabled):hover {
                background-color: $color-palette-primary-op-10;
            }

            &:not(.p-disabled).p-focus,
            &.p-dropdown-open {
                background-color: transparent;
                @include field-focus;
            }
        }
    }
}

p-dropdown {
    ::ng-deep {
        .p-dropdown {
            display: flex;
            flex-direction: row-reverse; // this allows having the plus icon at the left of the placeholder
            background: none;
            margin-left: $spacing-4;
            border-color: transparent;

            .p-dropdown-label {
                padding-right: $spacing-2;
                color: $black;
            }
        }
    }
}

.template-builder-box {
    border: 1px solid $color-palette-gray-400;
    border-radius: $border-radius-sm;
    height: 100%;
    width: 100%;
    background-color: $white;
    overflow: hidden;
}

.template-builder-box__header-container {
    height: 3.5rem;
    background-color: $color-palette-gray-200;
    padding: $spacing-1 $spacing-4 $spacing-1 $spacing-2;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header-container__last-buttons {
        display: flex;
        gap: $spacing-1;
    }
}

.template-builder-box__item {
    padding: 0px $spacing-1 0px $spacing-3;
    margin: $spacing-1 $spacing-3;
    height: $spacing-6;

    &:first-child {
        margin-top: $spacing-2;
    }

    &:last-child {
        margin-bottom: $spacing-3;
    }

    display: flex;
    align-items: center;
    justify-content: space-between;

    p {
        @include truncate-text;
    }
}

.template-builder-box--small {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    ::ng-deep {
        .p-button-text {
            margin: $spacing-3 0;
        }
    }
}
