.wear-bar-wrapper { position: relative !important; }
.wear-bar-wrapper .wear-bar-indicator { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid var(--v-primary-base); left: 0px; position: absolute; top: 5px; transform: rotate(180deg) translate(50%); transition: left 0.2s; width: 9px; }
.wear-bar-wrapper .wear-bar { background: linear-gradient(to right,var(--v-success-500-base) 7%,var(--v-secondary-green-400-base) 7%,var(--v-secondary-green-400-base) 15%,var(--v-secondary-warning-500-base) 15%,var(--v-secondary-warning-500-base) 38%,var(--v-warning-400-base) 38%,var(--v-warning-400-base) 45%,var(--v-error-500-base) 45%); height: 2px; }
.wear-bar-wrapper.vertical .wear-bar-indicator { left: 3px; top: 0px; transform: rotate(90deg); transition: top 0.2s; }
.wear-bar-wrapper.vertical .wear-bar { background: linear-gradient(to bottom,var(--v-success-500-base) 7%,var(--v-secondary-green-400-base) 7%,var(--v-secondary-green-400-base) 15%,var(--v-secondary-warning-500-base) 15%,var(--v-secondary-warning-500-base) 38%,var(--v-warning-400-base) 38%,var(--v-warning-400-base) 45%,var(--v-error-500-base) 45%); width: 2px; }