/* smart-gauge */
smart-gauge {
    display: block;
    width: var(--smart-gauge-default-width);
    height: var(--smart-gauge-default-height);
    min-width: 125px;
    min-height: 125px;
    fill: var(--smart-background-color);
}

    smart-gauge.smart-element {
        border: none;
    }

    smart-gauge[disabled] {
        user-select: none;
    }

    smart-gauge[size-mode="auto"] {
        min-height: initial;
    }

    smart-gauge:focus {
        outline: none;
    }

    .smart-gauge .drawContainer > svg {
        fill: var(--smart-gauge-label-fill-state);
        stroke: var(--smart-gauge-label-stroke);
    }

    .smart-gauge[dragged],
    .smart-gauge[dragged] .smart-label {
        cursor: pointer;
    }

    .smart-gauge  .smart-container,
    .smart-gauge.smart-container {
        position: relative;
        border-radius: 50%;
    }

    .smart-gauge .smart-svg-container {
        width: 100%;
        height: 100%;
        touch-action: none;
    }

    .smart-gauge .smart-tick,
    :host(smart-gauge) .smart-tick {
        stroke: var(--smart-border);
        stroke-width: 1px;
        width: 15px;
        pointer-events: none;
    }

    .smart-gauge[analog-display-type="fill"][ticks-position="track"] .smart-tick,
    .smart-gauge[analog-display-type="line"][ticks-position="track"] .smart-tick {
        stroke: #F2F2F2;
    }

    .smart-gauge .smart-tick-minor,
    :host(smart-gauge) .smart-tick-minor {
        width: 5px;
    }

    .smart-gauge[ticks-visibility="major"] .smart-tick-minor,
    .smart-gauge[labels-visibility="endPoints"] .smart-label-middle {
        visibility: hidden;
    }

    .smart-gauge .smart-needle,
    :host(smart-gauge) .smart-needle {
        width: 20px;
        height: 110px;
        fill: var(--smart-primary);
    }

    .smart-gauge .smart-needle-central-circle {
        fill: var(--smart-primary);
    }

    .smart-gauge .smart-track,
    :host(smart-gauge) .smart-track {
        width: 15px;
        stroke: var(--smart-border);
        stroke-width: 2px;
        fill: var(--smart-background);
    }

    .smart-gauge[show-ranges][ranges] .smart-track {
        opacity: 0;
    }

    .smart-gauge .smart-value,
    :host(smart-gauge) .smart-value {
        stroke: var(--smart-ui-state-border-active);
        stroke-width: 2px;
        fill: var(--smart-ui-state-active);
    }

    .smart-gauge .smart-line,
    :host(smart-gauge) .smart-line {
        stroke: var(--smart-background-color);
        stroke-width: 5px;
    }

    .smart-gauge .smart-range,
    :host(smart-gauge) .smart-range {
        width: 75px;
        fill: #D8D8D8;
    }

    .smart-gauge .smart-digital-display-container {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
    }

    .smart-gauge .smart-digital-display {
        --smart-numeric-text-box-background: transparent;
        --smart-numeric-text-box-text-align: center;
        position: absolute;
        display: none;
        width: 80px;
        height: auto;
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: black;
        font-size: inherit;
        pointer-events: initial;
    }

    .smart-gauge[digital-display] .smart-digital-display {
        display: inline-block;
    }

    .smart-gauge[digital-display-position="top"] .smart-digital-display {
        top: 25%;
        transform: translate(-50%, -50%);
    }

    .smart-gauge[digital-display-position="right"] .smart-digital-display {
        top: 50%;
        left: 70%;
        transform: translate(-50%, -50%);
    }

    .smart-gauge[digital-display-position="left"] .smart-digital-display {
        top: 50%;
        left: 30%;
        transform: translate(-50%, -50%);
    }

    .smart-gauge[digital-display-position="center"] .smart-digital-display {
        top: 50%;
        transform: translate(-50%, -50%);
    }



    .smart-gauge[show-unit] .smart-digital-display {
        --smart-numeric-text-box-text-align: right;
    }

        .smart-gauge[show-unit] .smart-digital-display input.smart-input {
            border-right: none;
        }

    /* --- Right-To-Left --- */

    .smart-gauge[right-to-left] .smart-label,
    .smart-gauge[right-to-left] .smart-label-middle {
        direction: rtl;
        text-anchor: end;
    }

/* --- */