// =Hint
.hint {
    // colors
    --hint-color: var(--palette-black-50);

    // params
    --hint-font-size: var(--type-scale-13);
    --hint-font-weight: normal;
    --hint-font-style: normal;
    --hint-line-height: var(--body-text-line);

    // props
    font-size: var(--hint-font-size);
    font-weight: var(--hint-font-weight);
    font-style: var(--hint-font-style);
    line-height: var(--hint-line-height);
    color: var(--hint-color);
}
label .hint {
    text-transform: none;
    font-weight: normal;
    letter-spacing: 0;
}
div.hint {
    margin-top: 2px;
}

// Variants
.hint-light {
    --hint-color: var(--palette-white-70);
}
.hint-success {
    --hint-color: var(--palette-positive-dark);
}
.hint-success.hint-light {
    --hint-color: var(--palette-positive-mid);
}
.hint-error {
    --hint-color: var(--palette-negative-dark);
}
.hint-req {
    --hint-color: var(--palette-negative-base);
    --hint-font-weight: bold;

    // props
    font-size: 105%;
}
.hint-req.hint-light,
.hint-error.hint-light {
    --hint-color: var(--palette-negative-mid);
}

// Dark theme
@include dark-theme {
    .hint {
        --hint-color: var(--palette-white-50);
    }
    .hint-success {
        --hint-color: var(--palette-positive-mid);
    }
    .hint-error {
        --hint-color: var(--palette-negative-mid);
    }
    .hint-req {
        --hint-color: var(--palette-negative-mid);
    }
}