.UnitsComponent {
    /* VARIABLES */
    
    --component-min-height: 23px;
    --component-border-thickness: 1px;
    --component-border: var(--component-border-thickness) solid #cccccc;
    --component-border-radius: 3px;
    --component-background-color: pink;
    --component-color: inherit;
    
    --section-border-radius-size: calc( var(--component-border-radius) - var(--component-border-thickness) );
    --section-padding-size: 5px;
    --section-hover-cursor: pointer;
    --section-focus-outline-color: #66afe9;
    --section-focus-boxshadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 9px 1px rgba(102, 175, 233, 0.6);
    --section-focus-transition-duration: 0.15s;
    
    --label-min-width: calc( 150px - var(--component-border-thickness) );
    --label-background-color: #f4f4f4;
    --label-color: #555555;
    --label-mandatory-color: #ff0000;
    
    --input-min-width: 30px;
    --input-background-color: #ffffff;
    --input-readonly-background-color: #eeeeee;
    --input-color: inherit;
    --input-placeholder-opacity: 0.7;
    
    --units-min-width: 30px;
    --units-background-color: #ffffff;
    --units-hover-background-color: #d9f2d9;
    --units-checked-background-color: #8cd98c;
    --units-readonly-background-color: #eeeeee;
    --units-readonly-checked-background-color: #b1cdb9;
    --units-color: inherit;
    --units-checked-color: inherit;
    
    /* COMPONENT */
    
    display: flex;
    
    min-height: var(--component-min-height);
    min-width: fit-content;
    max-width: fit-content;
    
    border: var(--component-border);
    border-radius: var(--component-border-radius);
    
    background-color: var(--component-background-color);
    color: var(--component-color);
    
    -webkit-transition: border-color        ease-in-out var(--section-focus-transition-duration),
                        -webkit-box-shadow  ease-in-out var(--section-focus-transition-duration);
    -o-transition:      border-color        ease-in-out var(--section-focus-transition-duration),
                        box-shadow          ease-in-out var(--section-focus-transition-duration);
    transition:         border-color        ease-in-out var(--section-focus-transition-duration),
                        box-shadow          ease-in-out var(--section-focus-transition-duration);
    
    /* SECTIONS */
    
    .Section {
        display: flex;
        
        /* LABEL */
        
        &.Label {
            label {
                flex: 1;
                
                display: flex;
                align-items: center;
                
                background-color: var(--label-background-color);
                color: var(--label-color);
            }
        }
        
        /* INPUT */
        
        &.Input {
            flex: 1;
            
            input {
                width: 100%;
                
                border: none;
                background-color: var(--input-background-color);
                color: var(--input-color);
                
                &::placeholder { font-style: italic; opacity: var(--placeholder-opacity); }
            }
        }
        
        /* UNITS */
        
        &.Units {
            input {
                position: fixed; /* required for Firefox */
                width: 0; /* so label takes all space */
                opacity: 0; /* hides the radio button while keeping it functional */
            }
            
            label {
                flex: 1;
                
                display: flex;
                justify-content: center;
                align-items: center;
                
                background-color: var(--units-background-color);
                color: var(--units-color);
            }
            
            input:not(:checked) + label:hover {
                background-color: var(--units-hover-background-color);
            }
            
            input:checked + label {
                background-color: var(--units-checked-background-color);
                color: var(--units-checked-color);
            }
            
            &.Hidden { display: none; }
        }
        
        /* BORDERS */
        
        & + .Section { border-left: var(--component-border); }
        
        &:is(:first-child),
        &:is(:first-child).Label label,
        &:is(:first-child).Input input,
        &:is(:first-child).Units label {
            border-top-left-radius: var(--section-border-radius-size);
            border-bottom-left-radius: var(--section-border-radius-size);
        }
        
        &:is(:last-child),
        &:is(:last-child).Label label,
        &:is(:last-child).Input input,
        /* .UnitsComponent .Section.Input:has(+ .Units.Hidden) input, */ /* put at then ends because it breaks Netbean's parser */
        &:is(:last-child).Units label {
            border-top-right-radius: var(--section-border-radius-size);
            border-bottom-right-radius: var(--section-border-radius-size);
        }
        
        /* WIDTH */
        
        &.Label label { min-width: var(--label-min-width); }
        &.Input input { min-width: var(--input-min-width); }
        &.Units label { min-width: var(--units-min-width); }
        
        /* PADDING */
        
        &.Label label,
        &.Input input,
        &.Units label { padding: 0px var(--section-padding-size); }
        
        /* TEXT ALIGNMENT */
        
        &.Label label { justify-content: flex-start; }
        &.Input input  { text-align: center; }
        &.Units label { justify-content: center; }
        
        /* TEXT STYLE */
        
        &.Label label { font-weight: bold; }
        &.Input input { font-weight: normal; }
        &.Units label { font-weight: normal; }
        
        /* NO LABEL TEXT SELECTION */
        
        &.Label label,
        &.Units label {
            -webkit-user-select: none; /* Safari */
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* Internet Explorer / Edge */
            user-select: none;
        }
        
        /* LABEL HOVER CURSOR */
        
        &.Label label[for],
        &.Units label[for] { cursor: var(--section-hover-cursor); }
        
        /* INPUT FOCUS */
        
        &.Input input:is(:focus, :focus-visible),
        &.Units input:is(:focus, :focus-visible) + label {
            outline: var(--component-border-thickness) solid var(--section-focus-outline-color);
            -webkit-box-shadow: var(--section-focus-boxshadow);
            box-shadow: var(--section-focus-boxshadow);
            z-index: 1;
        }
    }
    
    /* MANDATORY */
    
    &.Mandatory {
        .Label label { color: var(--label-mandatory-color); }
    }
    
    /* READONLY */
    
    &:is(.ReadOnly, .InputReadOnly) {
        .Input.Section input { background-color: var(--input-readonly-background-color); }
    }
    
    &:is(.ReadOnly, .InputUnitsReadOnly) {
        .Units.Section label { cursor: default; }
        .Units.Section input:not(:checked) + label { background-color: var(--units-readonly-background-color); }
        .Units.Section input:checked + label { background-color: var(--units-readonly-checked-background-color); }
    }
}

.UnitsComponent .Section.Input:has(+ .Units.Hidden) input {
    border-top-right-radius: var(--section-border-radius-size);
    border-bottom-right-radius: var(--section-border-radius-size);
}