@import "~@capillarytech/cap-ui-library/styles/_variables";

.cap-whatsapp-saved-cta {
    border: solid 1px $CAP_G06;
    margin-left: 24px;
    padding: 10px;
    border-radius: 4px;
    height: 48px;
    width: 619px;

    div:not(:last-child) {
        margin-right: 9px;
    }

    .url,
    .phone {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .url-type {
        border: solid 1px $CAP_G06;
        padding: 4px 8px;
        border-radius: 16px;
        text-align: center;
        background-color: #f1f1f1;
    }

    .whatsapp-saved-cta-phone-icon {
        margin-bottom: -4px;
    }

    .whatsapp-saved-cta-button-text {
        font-weight: 500;
    }

    .whatsapp-saved-cta-edit-icon {
        margin-left: 60px;
    }

    .whatsapp-cta-taglist {
        position: absolute;
        top: -20px;
    }

    .whatsapp-cta-tag-revert {
        margin-left: 90px;
        margin-top: 2px;
        transform: scaleX(-1);
    }
}

.cap-whatsapp-cta {
    border: solid 1px $CAP_G06;
    margin-left: 24px;
    padding: 20px;
    border-radius: 4px;

    .cta-label {
        margin-bottom: 4px;
    }

    .whatsapp-cta-save-delete-btn {
        .ant-btn {
            margin-right: $CAP_SPACE_16;
            margin-top: $CAP_SPACE_16;
        }
    }

    .whatsapp-render-btn-length {
        text-align: right;
    }

    .cta-phone-number {
        div.flag-dropdown {
            background-color: transparent;
            border: 0;
        }

        input {
            width: 99%;
        }

        div.flag-dropdown.open>ul {
            overflow-x: hidden;
        }
    }

    #whatsapp-cta-type,
    #whatsapp-cta-country,
    #whatsapp-cta-url-type {
        width: 90%;
    }
}