.wpdh-field {
    position: relative;
    margin-bottom: 20px;
    min-width: 200px;

    &.wrap {
        margin: 0 !important; // bỏ qua css của load-styles.php
    }

    &:last-of-type {
        border-bottom-color: #ccc;
    }

    .wpdh-field-label {
        margin-bottom: 5px;
    }

    .wpdh-field-control {
        width: fit-content;
        position: relative;
        // margin-bottom: 15px;

        input:not([type="checkbox"]):not([type="radio"]),
        select,
        textarea {
            //
        }

        .wpdh-field-copy-button {
            opacity: 0;
            position: absolute;
            bottom: -6px;
            right: 5px;
            margin-right: 0;

            .button {
                min-height: unset;
                line-height: 16px;
                text-decoration: none;
                color: unset;

                &:not(:hover) {
                    background: white;
                }

                &:hover {
                    color: white;
                    background-color: #0073aa;
                }
            }
        }

        &:hover {
            .wpdh-field-copy-button {
                opacity: 1;
            }
        }
    }

    .wpdh-field-note {
        margin-top: 5px;
    }

    &.wpdh-field-kind-input {

        &.wpdh-field-type-checkbox,
        &.wpdh-field-type-radio {
            .wpdh-field-control {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;

                label {
                    width: 150px;
                    display: flex;

                    input {
                        margin-top: 0px;
                    }
                }
            }

            &.horizontal {
                .wpdh-field-control {
                    flex-direction: row;
                    flex-wrap: wrap;
                }
            }
        }
    }

    &.wpdh-field-kind-select {
        .wpdh-field-control {
            min-width: 158px;

            select {
                width: 100%;
            }
        }
    }

    &.wpdh-field-kind-tab {
        &.wpdh-field-type-nav {
            &:not(.hidden) {
                display: flex;
                gap: 6px;
                padding-bottom: 0px;
                flex-wrap: wrap;
                border-bottom: none !important;
                margin-bottom: 0px;
                position: relative;
                z-index: 1;
                background: transparent;
            }

            li {
                list-style: none;
                padding: 6px 12px;
                cursor: pointer;
                border: 1px solid #ccc;
                border-bottom: none;
                background: #f5f5f5;
                font-size: 14px;
                transition: all 0.15s ease;
                margin-bottom: 0;
                font-weight: 600;

                &:hover {
                    background: #fff;
                }

                &.active {
                    background: #fff;
                    position: relative;
                    top: 1px;
                }
            }
        }

        &.wpdh-field-type-start {
            border: 1px solid #ccc;
            padding: 12px;
            background: #fff;
            transition: opacity 0.2s ease, visibility 0.2s ease;

            &.hidden {
                display: none;
            }
        }
    }

    &.wpdh-field-type-wp_media,
    &.wpdh-field-type-wp_multiple_media {
        .wpdh-media-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 10px;

            .wpdh-media-item {
                cursor: move;

                &.ui-sortable-placeholder {
                    border: 2px dashed gray;
                    background: #f0f6fc;
                    visibility: visible !important;
                }
            }

            img {
                aspect-ratio: 1/1;
                height: 50px;
                vertical-align: middle;

                /* The white padding effect */
                object-fit: cover; // show full image
                background-color: #fff; // white bars
                object-position: center; // center the image

                padding: 5px;
                border: 1px solid #ccc;
            }
        }

        .button {
            margin-right: 5px;
            margin-bottom: 5px;
        }
    }

    // as same as repeater
    &.wpdh-width- {
        &1 {
            width: calc(100% / 12) * 1 !important;
            grid-column: auto !important;
        }

        &2 {
            width: calc(100% / 12) * 2 !important;
            grid-column: auto !important;
        }

        &3 {
            width: calc(100% / 12) * 3 !important;
            grid-column: auto !important;
        }

        &4 {
            width: calc(100% / 12) * 4 !important;
            grid-column: auto !important;
        }

        &5 {
            width: calc(100% / 12) * 5 !important;
            grid-column: auto !important;
        }

        &6 {
            width: calc(100% / 12) * 6 !important;
            grid-column: auto !important;
        }

        &7 {
            width: calc(100% / 12) * 7 !important;
            grid-column: auto !important;
        }

        &8 {
            width: calc(100% / 12) * 8 !important;
            grid-column: auto !important;
        }

        &9 {
            width: calc(100% / 12) * 9 !important;
            grid-column: auto !important;
        }

        &10 {
            width: calc(100% / 12) * 10 !important;
            grid-column: auto !important;
        }

        &11 {
            width: calc(100% / 12) * 11 !important;
            grid-column: auto !important;
        }

        &12 {
            width: calc(100% / 12) * 12 !important;
            grid-column: auto !important;
        }

        &auto {
            width: auto !important;
            grid-column: auto !important;
        }
    }

    // as same as repeater
    &.wpdh-gridColumn- {
        &1 {
            width: auto !important;
            grid-column: span 1 !important;
        }

        &2 {
            width: auto !important;
            grid-column: span 2 !important;
        }

        &3 {
            width: auto !important;
            grid-column: span 3 !important;
        }

        &4 {
            width: auto !important;
            grid-column: span 4 !important;
        }

        &5 {
            width: auto !important;
            grid-column: span 5 !important;
        }

        &6 {
            width: auto !important;
            grid-column: span 6 !important;
        }

        &7 {
            width: auto !important;
            grid-column: span 7 !important;
        }

        &8 {
            width: auto !important;
            grid-column: span 8 !important;
        }

        &9 {
            width: auto !important;
            grid-column: span 9 !important;
        }

        &10 {
            width: auto !important;
            grid-column: span 10 !important;
        }

        &11 {
            width: auto !important;
            grid-column: span 11 !important;
        }

        &12 {
            width: auto;
            grid-column: span 12 !important;
        }
    }
}