toggle-corp/react-store

.scale-legend {
    display: flex;
    flex-direction: column;
    background-color: var(--color-foreground);
    width: 340px;

    .scale {
        border-bottom: var(--width-separator-thin) solid var(--color-accent);
        width: 100%;
        height: 12px;
    }

    .header {
        border-bottom: var(--width-separator-thin) solid var(--color-accent);
        padding: var(--spacing-small) var(--spacing-medium);
        color: var(--color-text-label);
        font-size: var(--font-size-small);
        font-weight: var(--font-weight-bold);
    }


    .scaleValues {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 var(--spacing-small);
        padding: var(--spacing-small) 0;

        span {
            color: var(--color-text-label);
            font-size: var(--font-size-small);

            &.title {
                text-align: center;
                line-height: 1.1;
                font-weight: 600;
            }

            &.value {
                font-family: var(--font-family-monospace);
            }
        }
    }
}