.labelContainer {
    margin-bottom: 5px;
}

.popover {
    padding: 5px $gutter-sm;
    background: $color-primary;
    color: white;
    border-radius: $radius;
    box-shadow: $overlay-shadow;

    &:after {
        border: solid transparent;
        content: ' ';
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(0, 0, 0, 0);
        border-width: 5px;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-top-color: $color-primary;
    }

    a {
        color: inherit;
        text-decoration: underline;

        &:hover {
            color: inherit;
            opacity: 0.9;
        }
    }
}

.label {
    font-size: 0.8em;
    text-align: left;
    display: inline-block;
    color: $color-faintText;
    cursor: pointer;

    .container__focus &,
    &:hover {
        color: $color-contentText;
    }

    .disabled &,
    .disabled &:hover {
        cursor: default;
        color: $color-faintText;
    }
}

.helpTrigger {
    width: 1.2rem;
    height: 1.2rem;
    position: relative;
    top: 2px;
    margin-left: 5px;
    color: $color-faintText;
    cursor: pointer;

    &:hover {
        opacity: 1;
        color: $color-contentText;
    }
}