/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.nps {
    --color-background: #f6f6f6;
    --radius: 3px;
    --color-primary: #24A7CF;
    --color-outline: rgba(36, 167, 207, 0.44);
    --color-primary-contrast: #fff;
    --color-background-dark: #C4C4C4;
}

.wpcf7 .nps {
    position: relative;
}

.wpcf7 .wpcf7-form-control.nps {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
}

.wpcf7 .wpcf7-form-control.nps input[type=radio] {
    position: absolute;
    opacity: 0;
}

.wpcf7 .wpcf7-form-control.nps .wpcf7-list-item-label {
    display: block;
    padding: 6px 12px;
    text-align: center;
    cursor: pointer;
    background-color: var(--color-background);
    transition: all 200ms ease-in;
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.wpcf7 .wpcf7-form-control.nps input[type=radio]:checked + .wpcf7-list-item-label {
    color: var(--color-primary-contrast);
    background-color: var(--color-primary);
}

.wpcf7 .wpcf7-form-control.nps .wpcf7-list-item-label:hover {
    background-color: var(--color-background-dark);
}

.wpcf7 .wpcf7-form-control.nps .wpcf7-list-item {
    margin-left: 0;
    flex: 1 1 auto;
}

.wpcf7 .nps-wrap {
    position: relative;
}

.wpcf7 .nps-wrap:before {
    left: 0;
    content: attr(data-least);
}

.wpcf7 .nps-wrap:after {
    right: 0;
    content: attr(data-most);
}

.wpcf7 .nps-wrap::before, .wpcf7 .nps-wrap::after {
    position: absolute;
    top: 3.25em;
    font-size: 0.875em;
}