$child-padding-y: 20px;
$child-padding-x: 20px;
$child-parent-spacing: 5px;
$child-arrow-width: 16px;
$child-arrow-height: 10px;

.coveo-child {
    position: relative;
    padding: $child-padding-y $child-padding-x;
    background-color: var(--grey-20);
    border-radius: $border-radius;
    border-top-left-radius: 0;

    &:not(.vertical) {
        margin-top: $child-arrow-height + $child-parent-spacing;
    }

    &::before {
        position: absolute;
        top: -$child-arrow-height;
        left: 0;
        display: block;
        width: 0;
        height: 0;
        border-right: $child-arrow-width * 0.5 solid transparent;
        border-bottom: $child-arrow-height solid var(--grey-20);
        border-left: $child-arrow-width * 0.5 solid transparent;
        content: '';
    }

    &.vertical {
        margin-left: $child-arrow-height + $child-parent-spacing;
        border-top-left-radius: $border-radius;

        &::before {
            top: calc(50% - #{$child-arrow-height});
            left: -$child-arrow-height - ($child-arrow-width * 0.5);
            border-top: $child-arrow-width * 0.5 solid transparent;
            border-right: $child-arrow-height solid var(--grey-20);
            border-bottom: $child-arrow-width * 0.5 solid transparent;
        }
    }

    &.mod-fixed-width {
        max-width: $input-max-width;
    }

    &.mod-pure-white {
        background-color: var(--white);

        &::before {
            border-bottom-color: var(--white);
        }
    }

    &.mod-light {
        background-color: var(--grey-20);

        &::before {
            border-bottom-color: var(--grey-20);
        }
    }
}

.child-section {
    margin-top: $child-section-spacing-top;
    padding-left: $child-section-spacing-left;
    border-left: $child-section-border-size solid var(--deprecated-light-grey);
}

.mod-child-section-first-input {
    padding-top: $child-section-first-input-spacing-top;
}