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

:host {
    background: $white;
    cursor: move;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: $spacing-1;
    height: $content-type-field-height;
    transition: box-shadow $basic-speed;
    border-radius: $border-radius-md;
    border: 1px solid $color-palette-gray-400;
    margin-bottom: $spacing-1;

    &:hover {
        box-shadow: $shadow-m;
        z-index: 1;
    }

    &.gu-transit {
        opacity: 0.4;
    }

    .field-drag {
        color: $color-palette-gray-400;
    }

    .field-icon {
        height: $spacing-7;
        min-width: $spacing-7;
        background-color: $color-palette-secondary-200;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        ::ng-deep {
            i {
                color: $color-palette-secondary-500;
            }
        }
    }
}

.field-properties {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-right: $spacing-1;
    flex-grow: 1;

    .field-properties__info-container,
    .field-properties__actions-container {
        height: $spacing-4;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .field-properties__info-container {
        .info-container__name {
            @include truncate-text;
            color: #000;
            font-size: $font-size-md;
        }
    }

    .field-properties__actions-container {
        dot-copy-link {
            ::ng-deep {
                .p-button {
                    padding-left: 0px;
                }
            }
        }

        p-button.open {
            ::ng-deep .p-button {
                background-color: $color-palette-primary-200;
            }
        }

        .field-properties__attributes-container {
            display: flex;
            gap: $spacing-3;
            font-size: $font-size-sm;

            .attributes-container__field-name {
                color: $color-palette-gray-900;
            }
            .attributes-container__attribute {
                color: $color-palette-gray-700;
            }
        }
    }
}

::ng-deep .contentType__overlayPanel {
    height: fit-content;
    width: fit-content;
    max-height: 3.875rem;
    border-radius: $border-radius-md;
    box-shadow: $shadow-s;

    .p-overlaypanel-content {
        padding: $spacing-1 $spacing-3;

        .field-properties__overlay-attributes-container {
            display: flex;
            flex-direction: column;
            color: $black;

            p {
                margin: 0;
            }

            .overlay-attributes-container__field-name {
                font-weight: 700;
                line-height: 1.125rem;
            }

            .overlay-attributes-container__attributes-text {
                margin-top: $spacing-1;
            }
        }
    }
}

::ng-deep {
    .p-button .p-button-label {
        text-transform: none;
    }
}
