
/* 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-background-color);
}

.smart-gauge .smart-needle-central-circle {
    fill: var(--smart-background-color);
}

.smart-gauge:focus .smart-needle,
:host(smart-gauge:focus) .smart-needle,
.smart-gauge:focus .smart-needle-central-circle,
:host(smart-gauge:focus) .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;
}

/* --- */
