.SuitabilityPieChart {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* This is a wrapper div. Applying % width directly to the canvas element forces its width to 0 */
.SuitabilityPieChart-chart {
    /* Additional pixels account for padding on grandparents
       We're happy for the pie chart labels to extend into padding whitespace
     */
    left: -18px;
    width: calc(100% + 18px + 15px);
}

.SuitabilityPieChart-invalidOverlay {
    align-items: center;
    background-color: rgb(255 255 255 / 90%);
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 35px;
    position: absolute;
    width: 100%;
}

.SuitabilityPieChart-header {
    position: absolute;
    text-align: center;
    top: 35px;
    width: 100%;
}

.SuitabilityPieChart-totalPercentage {
    font-size: 19px;
    top: 30px;
    position: absolute;
    width: 100%;
}

.SuitabilityPieChart-totalPercentage.is-valid {
    color: var(--success);
}

.SuitabilityPieChart-totalPercentage.is-invalid {
    color: var(--danger);
}

/* AR: This could presumably be made available for general use in Vue components,
but I'm keeping the namespace scoped for now */
.SuitabilityPieChart-fade-enter-active,
.SuitabilityPieChart-fade-leave-active {
    transition: opacity 0.3s;
}

.SuitabilityPieChart-fade-enter,
.SuitabilityPieChart-fade-leave-to {
    opacity: 0;
}